Jo Does Tech
Jo Does Tech
Jun 12, 2022

Creating a New Svelte Application.

Option 1 - Initialise with Vite via the Svelte option

This is currently the recommended approach to create a new svelte application alongside the Vite toolset for front-end development.

Run the following command and select the svelte option (or svelte-ts if you would prefer to use typescript):

npm init vite

The resulting output will look something like:

√ Project name: ... vite-project
√ Select a framework: » svelte
√ Select a variant: » svelte-ts

Scaffolding project in D:\projects\vite-project...

Done. Now run:

    cd vite-project
    npm install
    npm run dev

Vite is a very powerful set of modern build tools with very efficient HMR (Hot Module Replacement).

Option 2 - Initialise with SvelteKit (currently pre v1.0.0)

If you want to use a full-fledged application framework that handles features such as routing, SSR and SSG with little effort then use SvelteKit. The approach to routing is directory structure based similar to frameworks such as Next.js and Nuxt.js for those of you from React and Vue backgrounds.

There are other Svelte based frameworks, but SvelteKit is the official application framework for Svelte.

Run the following commands:

npm init svelte my-app
cd my-app
npm install
npm run dev -- --open

Option 3 - Initialise application with degit (no longer maintained)

degit makes copies of git repositories. This makes it very easy to initialise new starter projects based on a given github repository as oppose to git clone which pulls down the full git history.

Run the following command:

npx degit sveltejs/template project-name