Alex Parra

Posted on Oct 19, 2019

Basic Svelte app with Parcel

#svelte #parceljs

The easiest way to start a Svelte app is to use create-svelte-app (https://github.com/ph1p/create-svelte-app) which uses webpack.

But going through a setup of your own allows for more freedom and increased knowledge... So the following is a step-by-step approach to setting up your own Svelte app from scratch, using Parcel.js bundler.

Kick-off

On your terminal, navigate to wherever you put your dev projects in and create a directory with a name of your choosing by running mkdir myFirstSvelteApp.

Then, cd into the newly created directory and initialise a git repo with git init.

Now, run yarn init to quickly set up the project details in package.json. This will show some questions that you can either accept the default (leave blank and press Enter) or type in something more fitting.

With the basic done, we now need to install a couple of packages:

parcel-bundler Parcel.js
svelte Svelte
parcel-plugin-svelte (https://github.com/DeMoorJasper/parcel-plugin-svelte)

We can easily install all with a single command:
yarn add -D parcel-bundler parcel-plugin-svelte svelte

As we're using the -D flag, these will be installed as devDependencies.

If you now open your package.json file you'll see not only the content of the questions you answered after yarn init but also a section devDependencies with the entries listed above. Also note that yarn add not only added the dependencies to package.json but also installed them so you now have a node_modules folder with all the packages needed.

As an extra exercise, if you need to get a better feel of how dependencies "work", delete the node_modules folder with rm -rf ./node_modules/ and then run yarn install which will recreate it and download/install all the packages from scratch.

Before we make our first commit to save what we did above, we need to tell git to ignore the node_modules folder and some other default files. You may have these already ignored via a global gitignore but it's wise to have it at the project root.
As such, a quick way to create a .gitignore file that tells git to disregard node_modules and other sensitive files is below:

echo "node_modules" >> ./.gitignore
echo "dist" >> ./.gitignore
echo ".cache" >> ./.gitignore
echo ".env" >> ./.gitignore

Each line above appends the content between double-quotes into the file .gitignore. You can also manually edit the file in VS Code or similar. This file can have comments with # as a marker.

It's highly advisable to also create a README.md file with details about this project but I won't go into detail about it on this post.
In my opinion, this is a good time to make a first commit.

Getting some Hello

As we've left it, we're still missing a couple of things.
Let's get to it... We need to create the basic app files which will be:
./src/index.html used by parcel as starting point
./src/index.js our boot up script
./src/components/App.svelte the root component
./src/css/styles.scss our global generic styles

Note the subfolders src, src/components, src/css.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8" />
    <meta name="viewport" content="width=device-width" />

    <title>Svelte with Parcel</title>
    <link rel="stylesheet" href="./css/styles.scss">
  </head>

  <body>
    <script src="./index.js"></script>
  </body>
</html>

Parcel.js will read this file and compile whatever it "imports".
This file is just pure HTML.

index.js

import App from './components/App.svelte';

const app = new App({
  target: document.body,
  props: {
    name: 'Svelte',
  },
});

export default app;

This file is parsed by Parcel.js because it is referenced in index.html.

App.svelte

<script>
  export let name;
</script>

<style>
  h1 {
    text-align: center;
  }
</style>

<h1>Hello {name}!</h1>

This is our root component. We'll keep it really basic now.

styles.scss

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  color: #212223;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

Just regular scss. Import partials, declare variables, etc...

Almost there!!

In order to easily run the parcel bundler in dev mode or build for production we're going to add a scripts section to our package.json file:

  "browserslist": [
    "last 1 chrome versions"
  ],
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  }

Add the above, wherever you prefer inside package.json as long as it's inside the root {}.
The browserslist entry is need to prevent a compilation bug. More info

All done!

At your root folder, run yarn dev and then open http:localhost:1234
You should see:

Now head over to the Svelte tutorial and try it out on your newly created app.

Cheers!

PS: This took way longer to write than I imagined and much much longer that the process itself takes. Phew...

Top comments (7)

Alex Parra • Oct 20 '19

Created a template based on these steps:
github.com/alex-parra/svelte-templ...

See README for instructions.

Claude Barde • Aug 23 '20

Thank you very much for the template, it saved me a lot of time multiple times :)
I've been trying to add support for TypeScript in the Svelte components but I haven't been successful so far, any idea of what one has to do to be able to use TypeScript in your template? Thanks!