Advanced Setup: Svelte with ArcGIS API for JavaScript, Calcite Components, and Svelte Router

An example Svelte application that shows how use the ArcGIS API for JavaScript to load a map, and also includes Calcite Components and Svelte SPA Router. For a more basic setup, see the repo README.

Prerequisites

1. Install Node.js (LTS version recommended)
2. If using VS Code, install Svelte for VS Code extension.

Step by Step Directions

Vite+Svelte Init

In the terminal, go to parent folder of where you want to start, then run:

npm init vite@latest
  (Name the folder the name of your repo, then choose "Svelte")
cd uiux-pathways-app
npm install
npm run dev

You now have a working Svelte app!

Git Repo

This git stuff is optional.

1. In browser, create new repo.
2. Then run in terminal:

git init
git add .
git commit -m "init"
git remote add origin git@github.com:gavinr/esri-svelte-example.git (REPLACE URL WITH YOUR REPO NAME!)
git push --set-upstream origin master

Your code is now stored in GitHub!

Add Calcite

1. npm install --save-dev @esri/calcite-components
2. Add to top of App.svelte:

import '@esri/calcite-components/dist/calcite/calcite.css';
import { defineCustomElements, setAssetPath } from '@esri/calcite-components/dist/custom-elements';
setAssetPath('https://unpkg.com/@esri/calcite-components@1.0.0-beta.67/dist/calcite/assets');
defineCustomElements();

3. Update counter.svelte to be <calcite-button...
4. Replace paragraph text in App.svelte:

<calcite-icon icon="banana" />

You now have a Svelte app with Calcite Components!

Add a Router

To have the illusion of multiple "website pages" we will use a router. Note that SvelteKit has this built in, but using SvelteKit is beyond the scope of this simplified demo.

1. npm install --save-dev svelte-spa-router
2. Stop the npm run dev task.
3. Rename App.svelte to routes/HomePage.svelte
   • Update imports in HomePage.svelte to be the correct relative paths.
4. Create a new file, routes/MapPage.svelte: <div>MAP <calcite-icon icon="banana" /><a href="#/">Home</a></div>
5. Create a new file, App.svelte:

 <script>
  import Router from 'svelte-spa-router';
  import HomePage from './routes/HomePage.svelte';
  import MapPage from './routes/MapPage.svelte';

  const routes = {
    '/': HomePage,
    '/map': MapPage,
  }
</script>

<Router {routes}/>

1. Add a link to HomePage.svelte: <a href="#/map">Map</a>
2. Move the calcite block from HomePage.svelte to App.svelte
3. Move the :root { .... block in the <style> tag from HomePage.svelte to App.svelte.

You now have a Svelte app with multiple pages!

Add a Map

Adding a map using the ArcGIS API for JavaScript to a second page.

1. npm install @arcgis/core --save-dev
2. Create a new file, lib/Map.svelte. Make this the contents (but remove the h1 and p from the file).
3. Add the map to routes/MapPage.svelte:

<script>
  import Map from '../lib/Map.svelte';
</script>

and:

<Map centerText="Loading ..." />

You now have a map in the page!

Bonus: GitHub Actions Auto-publish

You can use github actions to automatically publish a public version of the application on GitHub Pages.

1. Create file: .github/workflows/main.yml with these contents.
2. Update vite.config.js:

export default defineConfig({
  plugins: [svelte()],
  // add: -----------------------------------------
  base: ""
})

3. Add a blank file named .nojekyll in the public folder.
4. Commit and push.
5. See the Actions tab in your GitHub repository to see the build status.
6. Go to the Settings > Pages tab in your GitHub repository and enable GitHub Pages (Source: Branch: gh-pages).

Issues?

If you see an issue with these instructions, please open an issue.

Helpful Links

• Vite Init
• Svelte Tutorial
• Esri Svelte Example
• Calcite
• svelte-spa-router
• GitHub Actions