How to get started with Svelte and Parcel

2020-03-21

Assuming that you already have npm installed, then creating and publishing a new website is really easy and fast.

Here's the minimal steps needed to get a website created with Svelte.js and Parcel.js:

Walkthrough

Create a new npm project: mkdir my-project && cd my-project && npm init -y
Install dependencies: npm i -D svelte parcel-bundler parcel-plugin-svelte @babel/polyfill

Create 'index.html' with the following code:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Parcel Plugin Svelte Example</title>
 </head>
 <body>
 <div id="demo"></div>

 <!-- This script tag points to the source of the JS file we want to load and bundle -->
 <script src="main.js"></script>
 </body>
 </html>

Create 'main.js':

 import '@babel/polyfill';
 import App from "./App.svelte";

 const app = new App({
   target: document.getElementById('demo'),
   data: {
     name: 'world'
   }
 });

Create 'App.svelte':

 <p>Hello, {name}!</p>
 <script>
   export let name = 'Anonymous';
 </script>

Update the 'script' block in 'package.json':

 "scripts": {
   "start": "parcel index.html",
   "build": "parcel build index.html"
 }

Run the app locally: npm run start
Go to localhost to see your site (i.e., http://localhost:1234) and you should see the output Hello, Anonymous!

Bonus

How to easily deploy the Svelte app:

Install Surge dependency: npm i --global surge
Deploy: cd dist && surge, then complete the interactive prompts, including choosing a subdomain of surge.sh
Go to the domain you specified and see the output Hello, Anonymous!

Resources

<Thought Experiment: 1-File Apps (Part 2)

New static blog site>