Building a Full Stack Application From Scratch with Svelte and Node (PART 1) — Getting Started
Svelte is becoming more and more popular these days. Not because it's a new framework, but because it's taking a different approach to building web apps, and it's really fast — check this video if you haven't yet!
What will you learn in this series?
After you finish this series, you should be able to build a complete application with Svelte/Sapper on the frontend and Node/Express on the backend with the following features:
- Communicating with a backend API
- Authentication/Authorization with JWT
- Maintaining logged-in user data with sessions and cookies
- Handling errors
- Loading states
- Preloading data
- Prefetching data
- Rendering nested components recursively
- More stuff
What are the prerequisites to this series?
This is not an introductory series to Svelte. It's for developers who know Svelte but haven't built a real-world application with it. If you're new to Svelte, the best place to start from is its official tutorial.
There are things that Svelte doesn't provide for building web applications like code-splitting, offline-support, server-rendered views with client hydration. That's why Sapper was created. Sapper is a framework that provides these things and more.
In this series, I assume that you are new to Sapper; however, taking a look at its docs would be more helpful.
Although in this series I'm focusing more on Svelte and Sapper, it wouldn't be a series for building a full stack application if we don't learn how to build the backend app.
For the backend app I've chosen Node/Express, but since the backend and the frontend are separate projects, you can implement the backend project using your favorite language/framework.
Even if you are not familiar with building applications with Express, you should be able to follow this series as I'm going to show you how to build it in step by step. Additionally, I tried to make the backend project as simple as possible.
What are we going to build?
The thing we're going to build doesn't matter. What matters is to understand how it was built. So once you finish this series, you should be able to apply what you learned here on your own projects.
But to get an idea of what we're going to build, check out the live demo of it — the TLDR of it: it's like hacker news.
You can also get the source code of the project on GitHub.
Now you know what this series is about, let's create a new Sapper project by running this in the terminal:
npx degit "sveltejs/sapper-template#rollup" svelte-news-app cd svelte-news-app npm install
This will create a new Sapper application with some example routes added for you.
Now run the app.
npm run dev
Then open the browser at localhost:3000.
Let's move on if everything is working correctly.
The application's structure
Let's get ourselves familiar with the project's structure. Don't worry if things are not fully clear to you after you read this. We'll get into more detail as we're building the app.
├── __sapper__ │ └── dev ├── rollup.config.js ├── src │ ├── client.js │ ├── components │ ├── node_modules │ ├── routes │ ├── server.js │ ├── service-worker.js │ └── template.html └── static ├── global.css ├── ...
- _sapper_: it contains the bundled files for dev and prod files. It's produced by rollup.
- rollup.config.js: the rollup config file for bundling the application.
- src/server.js, src/client.js, and src/service-worker.js: these are the three entry points to the app. On the first page load, server.js is responsible for rendering the page and setting things up like loading static files, loading sessions, etc. After the page loads, client.js takes on and hydrates the rendered HTML files. service-worker.js works as a proxy server that could respond with cached files. You can learn more about it from the docs.
- src/template.html: it's the template used for the responses coming from the server (remember about the first page load rendering?).
- src/routes/: this is where most of our work will be. It contains all pages and components of the app. We'll learn more about it later.
- src/components/: contains the UI general-purpose components for the app.
- src/node_modules/: more on this later.
- static/: contains all of your static files like images, CSS, JS, etc.
Importing all the CSS
Since this series isn't about CSS, let's add all the CSS code now and forget about it.
In this project, we'll put all of the CSS code into static/global.css, but in real-world projects, I prefer to write my styles inside svelte components using the
So copy everything from this file to static/global.css.
In the next part, we'll remove the example code, prepare the app's layout, create the Story component, and display it on the homepage.