Hi everyone!

In this post, I will show you how you can deploy a static Svelte app to the web using Surge, and the best thing is that this is all free! :D

Ok, let's begin!

First, we will create a Svelte app. Type these shell commands to the terminal to create a Svelte app and run it in development mode:

# Make sure you have 'npm' and 'npx' installed!
npx degit sveltejs/template your_project_name
cd your_project_name

# Optional: Use TypeScript for your app
# node scripts/setupTypeScript.js

# Install all dependencies and run in development mode
npm install
npm run dev

To check if all things goes well, go to localhost:5000 on your browser, and you should see a big orange text Hello World!.

Now, we will install surge globally through npm (add sudo before npm if you have problems with permission!):

npm install -g surge

We will now edit the package.json file. If you use the TypeScript option, it should look like this (It may still look somewhat similar to this if you don't use it):

{
  "name": "svelte-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear",
    "check": "svelte-check --tsconfig ./tsconfig.json"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "svelte-check": "^2.0.0",
    "svelte-preprocess": "^4.0.0",
    "@rollup/plugin-typescript": "^8.0.0",
    "typescript": "^4.0.0",
    "tslib": "^2.0.0",
    "@tsconfig/svelte": "^2.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

Here, in scripts part, we will add another command called deploy, this command will build our app, and then deploy it using surge:

  // Don't forget the comma! (unless if you put this at the last of the "scripts" 
  // part)
  "deploy": "rollup -c; surge public",

The command will build our app using rollup, then surge will deploy the public directory (contains static files like index.html) to its service for free.

One final thing to do is to add a CNAME file to public. This file simply contains the domain of our project. Enter this command to the terminal:

cd public; echo "hahaha.surge.sh" > CNAME

The command moves us to the public directory, then create a new file (if not exist) called CNAME, then in that file, we added our domain. In here I used hahaha.surge.sh, you can use any name you want under surge.sh subdomain, but make sure to check if the domain exists or not, if it doesn't (i.e. shows you a project not found 404 message), then it is OK to use. And you will need a domain provider to make a custom domain.

Now, when all things are done, cd to the root directory of your project, and run npm run deploy. This will take a while.

If you use surge for the first time, surge will ask you about your email and your password to create a new account or to login. It will also ask about the domain if you don't create the CNAME file.

When all things done, go to your domain (in this case it's hahaha.surge.sh), and you should see the same big text Hello world! that you see a few minutes ago.

End

So that's all for today! Thank you for reading the tutorial, I hope you enjoy it!

Btw, here are some links that will be helpful for you:

How to make a simple static website using Svelte and Surge!

Hi everyone!

End