Basic Svelte app with Parcel
Tags: svelte, parceljs
Published: 2019-10-19 15:55:39


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](https://parceljs.org/)
- `svelte` [Svelte](https://svelte.dev/)
- `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
```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
```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
```html
<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
```css
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:
```json
  "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](https://github.com/DeMoorJasper/parcel-plugin-svelte/issues/44)


**All done!**


At your root folder, run `yarn dev` and then open `http:localhost:1234`
You should see:
![Hello Svelte](https://thepracticaldev.s3.amazonaws.com/i/nwlcirlnf6jp966nkpyo.png)



Now head over to the [Svelte tutorial](https://svelte.dev/tutorial/basics) 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...