In this tutorial, we’ll build a small content website based on the Sapper template from Nicholas Christ, and modify it to use FaunaDB as storage and Netlify as free host. It uses Svelte and Tailwind CSS to make creating and designing webpages very clean and easy.

The first part is just an easy starter so everyone can follow along. You need some git knowledge (or use a git gui). It’s up to you to take it to the next level.

Here’s the plan:

1. Clone template repository
2. Build/run/push back
3. Deploy to Netlify
4. Add FaunaDB & posts
5. Glueing it together

You can do step 2 after you add FaunaDB, but I was happy to see it running on the net first and then adding features later.

---

1. Clone the repository

I started from https://github.com/nhristov/sapper-template-rollup, a modified Sapper template, that uses postcss, purgecss, cssnano, tailwindcss and svelte-preprocess.

The original sapper-template-rollup

Create a new repo from an existing one

Once you set it up on GitHub, you need it on your machine. Clone the repo via the command line if you’re familiar with it, or you can drag the url from your browser in a gui like Tower or SourceTree.

Open the project in your editor of choice, I use WebStorm, and in a terminal type npm install to install any dependencies that are needed. If you see mention of vulnerabilities, type npm audit to fix those before you continue.

2. Build, run and push back

Now you can build your project and run it locally. You do this with npm run dev and if all goes well you’ll see the http://localhost:3000 link appear. Test it in your browser.

I tried this sample project on 2 machines, one succeeded and the other failed. At first, I couldn’t figure out why… a call for help to the guys at Hackages resulted in the solution: make sure to run thelatest nodejs_ on your machine. At the time of writing this was 14.2.0. Problem solved._

Our project running locally

Click around in the top navigation and notice how snappy it works. On the blog page you’ll find a list of articles. That is the list we will convert to the FaunaDB online data store.

Let’s change something on the first page, just to make sure our updating works. Open the /src/routes/index.svelte file in your editor, and change the main title to

We did it!

or something similar.

When you save the index.svelte file, your browser should update and show the changes you made.

Committed and pushed the change to the title

Now commit the changes to git and push it to your repo on github.

#svelte #programming #netlify #jamstack #cms