Create and Host a Svelte App in 5 minutes or less
Tags: svelte, github, hosting, javascript
Published: 2019-11-12 17:13:12

---
title: Create and Host a Svelte App in 5 minutes or less
published: true
date: 2019-11-11 22:44:10 UTC
tags: svelte, github, hosting, javascript
canonical_url: https://triptych.writeas.com/create-and-host-a-svelte-app-in-5-minutes-or-less?pk_campaign=rss-feed
---

## Before you start

Yes! You can have a [Svelte](https://svelte.dev/) based app up and running in as fast as 90 seconds! Before we start the timer, let's get a few things set up (in case you don't already have them ready to go).
* Get a [Github](https://github.com) account
* Get a [Netlify](https://netlify.com) account 
* Install [Visual Studio Code](https://code.visualstudio.com/)
* Install [Node.js](https://nodejs.org/en/) on your system

## Decide on a name

What will you call your project? This will determine how you fill in the next few steps.

## Let's go!

1) Launch Visual Studio and create a directory with the name you chose. I picked StrawberryIcecream.

![](https://i.snap.as/McW3xyQ.png)2) Open a terminal window.

![](https://i.snap.as/DBWyTNz.png)

3) Type the following in the terminal:

`npx degit sveltejs/template StrawberryIcecream` (You could skip the create directory part in step 1, but I do this just to keep everything separate). ![](https://i.snap.as/DWzyUwA.png)

4) Try out your app. Type in the following in the terminal:

```
  cd StrawberryIcecream
  npm install
  npm run dev

```

You should see something like this in the terminal

![](https://i.snap.as/egSO1B0.png)

And this in the browser

![](https://i.snap.as/gtiL5Qf.png)

5) Now go to **[https://github.com/new/](https://github.com/new/)** (We are doing this so Netlify will have a place to find your files, and you can update them any time and Netlify will update your app!)

![](https://i.snap.as/2ebVuSH.png)

6) Put in your project name.

![](https://i.snap.as/PKpCA05.png)

7) Hit **Create repository** (Make sure the repo is “public”)

8) Now you need to get your files from your desktop to your repo. You should see something like this:

![](https://i.snap.as/JB4cKIz.png)

9) Click **uploading an existing file** and you'll see something like this.

![](https://i.snap.as/9qxtDkg.png)

10) Now go find your **StrawberryIcecream** folder on your system and drag and drop the files to your repo. Be sure to **NOT** include the `node_modules` folder.

![](https://i.snap.as/weurmW7.png)

11) Hit **Commit changes** to push them to your new repo. This completes the process and basically “stamps” your files with a time stamp so you can make changes to them later.

![](https://i.snap.as/aKFnb27.png)

We are almost done!

12) Sign in to Netlify.

13) Choose **New site from Git**

14) Choose **Github** under _Continuous deployment_

15) It will ask you to authenticate with Github. You say yes.

16) Now pick a repo. I'm picking my `StrawberryIcecream` one.

![](https://i.snap.as/nKeV88o.png)

17) Now here's a potentially tricky part. You need to tell Netlify how to build your app, and what directory to deploy from. You will see **Basic build settings**.\* In the **build** field type `npm run build`\* In the **publish** directory type `/public`

18) Hit **Deploy site**. You should see something like this:

![](https://i.snap.as/dINE6ZX.png)

19) After a few seconds you should see something like this:

![](https://i.snap.as/1WN3E7L.png)

20) Your site is deployed! Click the url and you will see your Svelte App! If you want to change the name of the site go to **Site settings** and hit **Change site name** I changed mine to [https://strawberryicecream.netlify.com/](https://strawberryicecream.netlify.com/)

Now, here's the cool thing. You can make changes to your local files, you and push them up to your github repo (you can even drag and drop them again if you don't want to use GIT commands!) and after you commit the changes, the site will automatically update!

1) Just make a change in Visual Studio ( go to `src/main.js`):

![](https://i.snap.as/O5ua5gP.png)

2) Go to your github repo ( mine is [https://github.com/triptych/StrawberryIcecream/tree/master/src](https://github.com/triptych/StrawberryIcecream/tree/master/src) )

3) Hit **upload files** ( assuming you don't want to set up GIT to do it that way)

4) Pick your `main.js` file you changed. Drag and drop it up to the site and **commit** the change.

5) Wait about 60 seconds.

6) Your site is updated!! ![](https://i.snap.as/ANW82tq.png)

So, with barely any set up, or special commands, you can get a Svelte site up and running in minutes!I hope you got something out of this article. Please share and stuff!