Creating a Project

We will use Vite to create a new Svelte project:

npm create vite@latest my-svelte-app -- --template svelte

Follow the prompts to execute the commands. If everything goes smoothly, your browser should be able to successfully open the project homepage. Alternatively, you can visit https://vite.new/svelte to continue this tutorial via an online IDE.

Next, we install svelte-pilot in the project:

npm i svelte-pilot

Then, we create a route configuration file src/router.js:

import { Router } from 'svelte-pilot'

export default new Router({
  routes: [
    {
      path: '/',
      component: () => import('./App.svelte')
    }
  ]
})

Finally, we modify src/main.js to start the router:

import './app.css'
import { ClientApp } from 'svelte-pilot'
import router from './router'

router.start(
  () =>
    new ClientApp({
      target: document.getElementById('app'),
      props: { router }
    })
)

At this point, we have completed a simplest Svelte application and successfully integrated Svelte Pilot. Next, we will introduce how to configure routing and layout using Svelte Pilot.