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-bundlerParcel.js -
svelteSvelte -
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
-Dflag, these will be installed asdevDependencies.
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_modulesfolder withrm -rf ./node_modules/and then runyarn installwhich 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.jsonas long as it's inside the root{}.
Thebrowserslistentry 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)
Created a template based on these steps:
github.com/alex-parra/svelte-templ...
See README for instructions.
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!
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.
🚀
Hi Florian!
Glad it was helpful.
Will check Piral myself too.
Best.
I'd hate to rip off of your post so would you do the honor of updating/following up for Svelte3/Parcel2? I'd be happy to provide you with a skeleton
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
Very nice! but I have a question, why do you need to export default app at the end of index.js?