DEV Community

Cover image for Basic Svelte app with Parcel
Alex Parra
Alex Parra

Posted on

Basic Svelte app with Parcel

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:

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
Enter fullscreen mode Exit fullscreen mode

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:
Hello Svelte

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...

Discussion (6)

Collapse
alexparra profile image
Alex Parra Author

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

See README for instructions.

Collapse
claudebarde profile image
Claude Barde

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!

Collapse
florianrappl profile image
Florian Rappl

Thanks Alex! Looks awesome and much appreciated since we would love to support Svelte also in Piral.

Under the hood Piral uses Parcel, so your instructions are super useful to implement this as an opt-in plugin.

🚀

Collapse
alexparra profile image
Alex Parra Author

Hi Florian!
Glad it was helpful.
Will check Piral myself too.
Best.

Collapse
nikosefthias profile image
Nikos Efthias

unfortunately parcel-plugin-svelte is completely broken and no longer works.
At this stage there doesnt seem to be a way to build svelte using parcel

Collapse
itaysmalia profile image
Itay Sin Malia

Very nice! but I have a question, why do you need to export default app at the end of index.js?