Fullstack Svelte Course Overview

Introduction

Development Environment Setup

Initializing a Svelte Project

Setting up a Formatter and Linter

Setting Up A Development Environment

Single Page Application Routers

Front End Layouts

Front End Routing

Front End Component Libraries

Creating a Landing Page

Events and Input Bindings

User Interface Styles and Interactions

Initializing an Express Project

REST API Endpoints

School Lunch Data Model

Creating the Backend Application

Fetching Data with Axios

Svelte Each Blocks

Showing Loading Spinner Icons

Externalizing Frontend Configuration

Fetching Data in the Frontend

Installing PostgreSQL and Initial Setup

Knex Migrations

Using Knex with Express

Adding Post, Put and Delete Endpoints

Adding Persistence with PostgreSQL

Deleting Data with the Front End

Creating Data with the Front End

The Lunch Week Details Component

Creating, Updating and Deleting Data in the Frontend

JWT Based Security

Evolving the App to Multi Tenant

User Registration

Securing the Application

Public Lunch Week Page

Public Lunch Menu View

Building and Serving Svelte

Production Deployment

svelte

node.js

This course teaches all the major concepts you need to build a production ready SaaS application by step by step _building a fully functional application_. The course is divided into two main parts - the _frontend_, which uses Svelte to build an interactive, rich user interface and the _backend_, which uses Express and PostgreSQL to build a server that handles data management.

Svelte is an exciting new frontend UI framework that offers a very developer friendly workflow and easy to learn syntax. Express and PostgreSQL are tried-and-true technologies that provide a rock solid backend.

Across about 7 hours of video instruction with full source code, this course covers everything from setting up your development environment to securing your application with a multi-tenant architecture and ultimately deploying the application to production.

Build a Svelte app with Node.js, Express, and Postgresql

In this course, we'll be creating a full stack SaaS application with Svelte, Express and PostgreSQL

Fullstack Svelte

Persistence with a relational PostgreSQL database

Frontend create, read, update and delete operations

How to integrate Auth0 for JWT authentication

, then the next steps will be familiar to you. Svelte has adopted a similar approach, making it very easy to initialize a boilerplate project.

In the previous lesson, we created a parent directory called 

. From the command line in that directory run the following:

$ npm init vite frontend -- --template svelte

Note: The above command requires Git to be installed. On Windows systems, you may want to use Git Bash for this command.

Note: Please consider upgrading NPM itself to version 8.x or higher and Node to 16.x or higher if you have older versions.

 is a project scaffolding tool that will create a new folder called 

 and scaffold a new Svelte project inside it with some basic source files, a 

 file for dependencies and a roll-up config file for production builds.

We only need two more commands to start running the Svelte front end in a hot-loading local development environment.

$ cd frontend
$ npm install
$ npm run dev

If you are running the latest version of NPM, you may get dependency tree errors when running npm install. You can try 

 to force the installation and continue. Further information about NPM behavior regarding dependencies is discussed here: 

https://stackoverflow.com/questions/66020820/npm-when-to-use-force-and-legacy-peer-deps

You should see a few messages as NPM installs the required dependencies from 

, and then the following output from the local development server:

  Your application is ready~! 🚀

  - Local:      http://localhost:5000

────────────────── LOGS ──────────────────

. Behold, you are now running a Svelte app!

One of our favorite advancements in development tooling is the hot-loading local development environment. When working with Svelte and running the local development environment (

) it will attempt to automatically load any source code changes into your web browser.

To see this in action, open up VSCode to the 

 and save the file. Then head over to your browser which should automatically refresh the page with the new property name.

const app = new App({
  target: document.body,
  props: {
    name: 'me',
  },
})

Let's do some clean-up and remove things that we won't need from the boilerplate project.

const app = new App({
  target: document.body,
  props: { // delete
    name: 'me', // delete 
  }, // delete
})

<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>Svelte app</title>

	<link rel='icon' type='image/png' href='/favicon.png'>

	<link rel='stylesheet' href='/global.css'> 
	
	<link rel='stylesheet' href='/build/bundle.css'>

	<script defer src='/build/bundle.js'></script>
</head>

Nice job! We have initialized a Svelte project and done a little clean-up of the boilerplate example code. In the next lesson, we'll install and configure some tools to help keep our code formatted and clean.

---
title: Initializing a Svelte Project
description: Initializing a Svelte Project
privateVideoUrl: https://fullstack.wistia.com/medias/crp0y5arbp
codeFolder: course/code/module_01/lesson_02/school-lunch/frontend
isPublicLesson: true
---

### Initializing a Svelte Project

If you have used the tools _Create React App_ or _Vue CLI_, then the next steps will be familiar to you. Svelte has adopted a similar approach, making it very easy to initialize a boilerplate project.

In the previous lesson, we created a parent directory called `school-lunch`. From the command line in that directory run the following:

```shell
$ npm init vite frontend -- --template svelte
```

> Note: The above command requires Git to be installed. On Windows systems, you may want to use Git Bash for this command.
>
> Note: Please consider upgrading NPM itself to version 8.x or higher and Node to 16.x or higher if you have older versions.

In this command, **vite** is a project scaffolding tool that will create a new folder called `frontend` and scaffold a new Svelte project inside it with some basic source files, a `package.json` file for dependencies and a roll-up config file for production builds.

We only need two more commands to start running the Svelte front end in a hot-loading local development environment.

Go ahead and run these:

```shell
$ cd frontend
$ npm install
$ npm run dev
```

If you are running the latest version of NPM, you may get dependency tree errors when running npm install. You can try `npm install --force` to force the installation and continue. Further information about NPM behavior regarding dependencies is discussed here: <https://stackoverflow.com/questions/66020820/npm-when-to-use-force-and-legacy-peer-deps>.

You should see a few messages as NPM installs the required dependencies from `package.json`, and then the following output from the local development server:

```shell
  Your application is ready~! 🚀

  - Local:      http://localhost:5000

────────────────── LOGS ──────────────────
```

Open up your browser and navigate to <http://localhost:5000>. Behold, you are now running a Svelte app!

![Svelte Hello World](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_01/lesson_01.02/public/svelte-hello-world.jpg)

### The Hot-Loading Development Environment

One of our favorite advancements in development tooling is the hot-loading local development environment. When working with Svelte and running the local development environment (`npm run dev`) it will attempt to automatically load any source code changes into your web browser.

To see this in action, open up VSCode to the `school-lunch` project folder. Locate the file `/frontend/src/main.js` and open it in the editor.

![vscode-hello-world](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_01/lesson_01.02/public/vscode-hello-world.jpg)

Change the `name` property from `world` to `me` and save the file. Then head over to your browser which should automatically refresh the page with the new property name.

```js
const app = new App({
  target: document.body,
  props: {
    name: 'me',
  },
})
```

### Boilerplate Clean-Up

Let's do some clean-up and remove things that we won't need from the boilerplate project.

1.  In `main.js`, remove the `props` object:



```js
const app = new App({
  target: document.body,
  props: { // delete
    name: 'me', // delete 
  }, // delete
})
```

2.  Since we removed the `name` prop above, open `App.svelte` and remove the references to `name`:



```html
<script>
  export let name // DELETE 
</script>

<main>
  <h1>Hello {name}!</h1> 
  <p>
    Visit the
    <a href="https://svelte.dev/tutorial">Svelte tutorial</a>
    to learn how to build Svelte apps.
  </p>
</main>
```

Also, remove the entire `<style>` section. We will revisit styles later.

```html
<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>
```

3.  Under `/frontend/public` delete the file `global.css`:

```sh
cd public
rm global.css
```

4.  In `index.html`, remove the reference to `global.css`:



```html
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>Svelte app</title>

	<link rel='icon' type='image/png' href='/favicon.png'>

	<link rel='stylesheet' href='/global.css'> 
	
	<link rel='stylesheet' href='/build/bundle.css'>

	<script defer src='/build/bundle.js'></script>
</head>
```

### Finishing Up

Nice job! We have initialized a Svelte project and done a little clean-up of the boilerplate example code. In the next lesson, we'll install and configure some tools to help keep our code formatted and clean.

Hi. How would I make our app Sapper-based/powered?

Hi. Wanted to know how to enable sveltekit for this project? Can you please let me know. Thnx.

The command here is different than the one shown in the video, which is the correct command? 

jChapman

Hi please use the written command. I had to change it recently and have not had a chance to update the video. Thanks and good luck!

freeman-g

I think we also need to additionally clean up the {name} from App.svelte because it produces "Hello undefined!" on the browser window. Please advise.

Venkatt Guhesan

Yes, we end up addressing that in the lesson about routing, but it's a good idea to go ahead and remove that too. I'll update the lesson to show that as well.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Fullstack Svelte

Module 1: Introduction

Introduction:

Start Here

Introduction: (5:23)

Fullstack Svelte Course Overview

Module 2: Setting Up A Development Environment

Lesson 1: (4:12)

Development Environment Setup

Lesson 2: (7:04)

Initializing a Svelte Project

Lesson 3: (9:25)

Setting up a Formatter and Linter

Module 3: Front End Routing

Lesson 1: (20:16)

Single Page Application Routers

Lesson 2: (11:36)

Front End Layouts

Module 4: User Interface Styles and Interactions

Lesson 1: (6:15)

Front End Component Libraries

Lesson 2: (6:38)

Creating a Landing Page

Lesson 3: (13:47)

Events and Input Bindings

Module 5: Creating the Backend Application

Lesson 1: (16:48)

Initializing an Express Project

Lesson 2: (10:52)

REST API Endpoints

Lesson 3: (13:47)

School Lunch Data Model

Module 6: Fetching Data in the Frontend

Lesson 1: (14:34)

Fetching Data with Axios

Lesson 2: (10:59)

Svelte Each Blocks

Lesson 3: (6:36)

Showing Loading Spinner Icons

Lesson 4: (5:31)

Externalizing Frontend Configuration

Module 7: Adding Persistence with PostgreSQL

Lesson 1: (7:18)

Installing PostgreSQL and Initial Setup

Lesson 2: (12:37)

Knex Migrations

Lesson 3: (15:32)

Using Knex with Express

Lesson 4: (21:57)

Adding Post, Put and Delete Endpoints

Module 8: Creating, Updating and Deleting Data in the Frontend

Lesson 1: (22:32)

Deleting Data with the Front End

Lesson 2: (9:45)

Creating Data with the Front End

Lesson 3: (28:42)

The Lunch Week Details Component

Module 9: Securing the Application

Lesson 1: (37:19)

JWT Based Security

Lesson 2: (35:05)

Evolving the App to Multi Tenant

Lesson 3: (36:25)

User Registration

Module 10: Public Lunch Menu View

Lesson 1: (20:35)

Public Lunch Week Page

Module 11: Production Deployment

Lesson 1: (13:35)

Building and Serving Svelte

Lesson 2: (23:56)

Production Deployment

Initializing a Svelte Project