Svelte Sapper Pokedex

Raigyo
1

Svelte / Sapper: Pokédex using Pokémon API. (Demo on Heroku)

Download

Svelte.js - Pokédex

December 2020

🔨 Pokédex made with Svelte using Pokémon API.

From Udemy: Svelte de A à Z

Demo on Heroku

About

Applcation that fetches a Pokémon API.

It displays Pokémons by name (in French) and display an image of the creature.

Tip: disable autosave when you work with api, otherwise it will make tons of not useful request.

How to test

Clone
npm install
npm run dev

How to make a Github page

Pages must be served with Sapper
Link the app to a Github repository
npm install -D gh-pages
Modify package.json

"scripts": {
    "dev": "sapper dev",
    "build": "sapper build --legacy",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build",
    "deploy": "sapper export --legacy &&  gh-pages -d __sapper__/export"
},

npm run deploy
set the gh-pages branch that was just deployed as the main branch for GitHub Pages to read from.

How to deploy on Heroku

heroku login
heroku create my-app
git push heroku HEAD:master

"fetch" is not defined

Use :

import { onMount } from 'svelte'

  onMount(async () => {
    const fetchPokemonBase = () => {
      fetch('https://pokeapi.co/api/v2/pokemon/?limit=151')
      // ...
  });

Useful links

Top categories