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

As developers, we want to craft consistent and readable code. It is worth spending a little bit of extra time now to set up formatting and linting tools that will help keep your code clean and enforce good development practices.

Linting is the process of statically analyzing code for problems such as undeclared variables, unused variables and other syntax and best practice issues.

 and look at a few examples of how these tools help developers create more professional and bug-free code.

First off, go to the Extensions tab in VSCode and install the Prettier extension. This will integrate Prettier into VSCode.

 in the Default Formatter field under Settings:

After this, head over to the command line under the 

 directory and install the following NPM dev dependencies:

$ npm install --save-dev prettier-plugin-svelte

The last step for setting up Prettier is to create the file 

 containing the Prettier settings below. You can change these according to your own preference - for example, if you like semicolons with JavaScript, change the 

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

 and hit Cmd-S or Ctrl-S to save the file. Since we have set 

, VSCode should use Prettier's configuration to format the file.

You should notice that Prettier's settings have been implemented - for example, the semicolons may have been removed and the tab width changed from four to two.

Let's go one step further and install and configure ESLint. ESLint will apply a set of recommended rules to keep your code clean and, in some cases, prevent bugs. We'll try a couple of examples once we have completed the set-up.

Again, on the VSCode Extensions tab, install the ESLint extension. Then head back to the command line and under the 

 directory install a few more dev dependencies:

npm install --save-dev eslint@7.0.0 eslint-plugin-svelte3 babel-eslint

You guessed it! Next we need to create the file 

 is the command to create a production build of our Svelte app.) We will add the ESLint command to the process so that the build process will fail if there are any linting errors.

"dev": "npx eslint ./src && vite",
"build": "npx eslint ./src && vite build",

This will cause ESLint to run and lint the code every time we run a production build or start the local dev environment.

 and let ESLint warn us about the issues.

First off, run a build from the command line in the 

If there are no errors, then the command should output the following, and explain that the build process created a production bundle under the public directory.

> svelte-app@1.0.0 build /workspace/school-lunch/frontend
> npx eslint ./src && vite

src/main.js → public/build/bundle.js...
created public/build/bundle.js in 426ms

. Can you spot the error? If not, ESLint will tell us in the next step.

Go back to the command line again, and run another build:

$ npm run build

> svelte-app@1.0.0 build /workspace/school-lunch/frontend
> npx eslint ./src && vite


/workspace/school-lunch/frontend/src/App.svelte
  4:15  error  'xyz' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

npm ERR! code ELIFECYCLE

Perfect - this shows us ESLint in action. It catches a bug, prevents our production build and tells us that the variable xyz is not defined. If you look closely, you'll notice that it gives the file and the line number where the error was found, making it easy to fix the problem.

We've made great progress. In the next module, we will set up a Svelte router and stub out some pages in our application.

---
title: Setting up a Formatter and Linter
description: Setting up a Formatter and Linter
privateVideoUrl: https://fullstack.wistia.com/medias/z0f2mfu0re
codeFolder: course/code/module_01/lesson_03/school-lunch/frontend
isPublicLesson: true
---

### Formatting and Linting

As developers, we want to craft consistent and readable code. It is worth spending a little bit of extra time now to set up formatting and linting tools that will help keep your code clean and enforce good development practices.

> Linting is the process of statically analyzing code for problems such as undeclared variables, unused variables and other syntax and best practice issues.

In this lesson, we will configure **Prettier** and **ESLint** and look at a few examples of how these tools help developers create more professional and bug-free code.

### Prettier.js

First off, go to the Extensions tab in VSCode and install the Prettier extension. This will integrate Prettier into VSCode.

![Prettier](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_01/lesson_01.03/public/prettier-extension.jpg)

Next, go to VSCode _Preferences > Settings_ and search for `format`. Make sure the option _Format on Save_ is checked.

![format on save](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_01/lesson_01.03/public/format-on-save.jpg)

Additionally, you may need to choose `esbenp.prettier-vscode` in the Default Formatter field under Settings:

![default formatter](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_01/lesson_01.03/public/default-formatter.png)

After this, head over to the command line under the `frontend` directory and install the following NPM dev dependencies:

```shell
$ npm install --save-dev prettier-plugin-svelte
```

The last step for setting up Prettier is to create the file `frontend/.prettierrc.json` containing the Prettier settings below. You can change these according to your own preference - for example, if you like semicolons with JavaScript, change the `semi` property to true.

```json { actualFilename=../../../code/module_01/lesson_03/school-lunch/frontend/.prettierrc.json endChar=86 endLine=7 startChar=0 startLine=1 statedFilename=.prettierrc.json url=https&#x3A;//gitlab.com/fullstackio/books/fullstack-svelte-course/module_01/lesson_01.03/.../../code/module_01/lesson_03/school-lunch/frontend/.prettierrc.json }
{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}
```

Now, let's see it in action. Open `App.svelte` and hit Cmd-S or Ctrl-S to save the file. Since we have set _Format on Save_, VSCode should use Prettier's configuration to format the file.

You should notice that Prettier's settings have been implemented - for example, the semicolons may have been removed and the tab width changed from four to two.

### ESLint.js

Let's go one step further and install and configure ESLint. ESLint will apply a set of recommended rules to keep your code clean and, in some cases, prevent bugs. We'll try a couple of examples once we have completed the set-up.

Again, on the VSCode Extensions tab, install the ESLint extension. Then head back to the command line and under the `frontend` directory install a few more dev dependencies:

```shell
npm install --save-dev eslint@7.0.0 eslint-plugin-svelte3 babel-eslint
```

You guessed it! Next we need to create the file `frontend/.eslintrc.json` with the following config:

```json { actualFilename=../../../code/module_01/lesson_03/school-lunch/frontend/.eslintrc.json endChar=346 endLine=21 startChar=0 startLine=1 statedFilename=.eslintrc.json url=https&#x3A;//gitlab.com/fullstackio/books/fullstack-svelte-course/module_01/lesson_01.03/.../../code/module_01/lesson_03/school-lunch/frontend/.eslintrc.json }
{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  },
  "plugins": ["svelte3"],
  "extends": ["eslint:recommended"],
  "overrides": [
    {
      "files": ["**/*.svelte"],
      "processor": "svelte3/svelte3"
    }
  ]
}
```

We are going to add ESLint to the `npm build command` in `package.json`. (We have not discussed it yet, but `npm run build` is the command to create a production build of our Svelte app.) We will add the ESLint command to the process so that the build process will fail if there are any linting errors.

Open up `package.json` and add `npx eslint ./src &&` to the front of both the `build` and `dev` scripts:

Change this:

```json
"dev": "vite",
"build": "vite build",
```

To this:

```json
"dev": "npx eslint ./src && vite",
"build": "npx eslint ./src && vite build",
```

This will cause ESLint to run and lint the code every time we run a production build or start the local dev environment.

### Testing ESLint

In this section, we are going to _purposefully write some bad code_ and let ESLint warn us about the issues.

First off, run a build from the command line in the `frontend` directory:

```shell
$ npm run build
```

If there are no errors, then the command should output the following, and explain that the build process created a production bundle under the public directory.

```shell
> svelte-app@1.0.0 build /workspace/school-lunch/frontend
> npx eslint ./src && vite

src/main.js → public/build/bundle.js...
created public/build/bundle.js in 426ms
```

Great. Now open up the `App.svelte` file in VSCode and add the line `console.log(xyz)`. Can you spot the error? If not, ESLint will tell us in the next step.



```js
<script>
  export let name 
  console.log(xyz)
</script>
```

Go back to the command line again, and run another build:

```shell
$ npm run build

> svelte-app@1.0.0 build /workspace/school-lunch/frontend
> npx eslint ./src && vite


/workspace/school-lunch/frontend/src/App.svelte
  4:15  error  'xyz' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

npm ERR! code ELIFECYCLE
```

Perfect - this shows us ESLint in action. It catches a bug, prevents our production build and tells us that the variable xyz is not defined. If you look closely, you'll notice that it gives the file and the line number where the error was found, making it easy to fix the problem.

We've made great progress. In the next module, we will set up a Svelte router and stub out some pages in our application.

In lesson tab I'm seeing broken links for jpg files.  Also is there a way to download the Lesson tab text for printing?

Brian Rieman

Hello, I'm not sure why the images quit working and I have asked one of our team members to look into this issue and the capability for printing. Will let you know.

freeman-g

@Brian, the issue with the images has been fixed, thank you for letting us know. Regarding printable formats, since this is a video course, there is not an e-book style printable document. However, on the first lesson "Fullstack Svelte Course Overview" there is a link to download the full set of code. In this zip file, is a markdown file for each lesson. This is where all the written narrative comes from and you can find markdown formatters for VSCode that would show these documents in a nice format. Hope that helps!Here's the link to the first lesson:https://www.newline.co/courses/fullstack-svelte/fullstack-svelte-course-overviewHere's the link directly to the code download:https://api.newline.co/assets/protected/courses/fullstack-svelte/downloads/course-full.zip 

Hi there, enjoying this so far except I get an error running `npm run dev` - there seems to be an issue with some combination of technologies ebcause I get the following error: > svelte-app@1.0.0 dev> npx eslint ./src && rollup -c -w(node:3636) [ESLINPERSONALCONFISUPPRESS] DeprecationWarning: '~/.eslintrc.' config files have been deprecated. Please remove it or add 'root:true' to the config files in your projects in orderto avoid loading '~/.eslintrc.*' accidentally. (found in "..\..\..\..\.eslintrc")(Use node --trace-deprecation ... to show where the warning was created)Oops! Something went wrong! :(ESLint: 7.19.0Error: ESLint configuration of processor in '..\.eslintrc.json#overrides[0]' is invalid: 'svelte3/svelte3' was not found.

Dominic Myers

My bad, the .eslintrc.json file was in the wrong directory!

Hi, my eslint seems to be working but i dont see the eslint with the double tick at the bottom right of visual studio, i was just wondering why is this? Also i was just wondering why do we need to add this command in the global visual studio settings when we have created an eslintrc.json for the project?"[svelte]": {"editor.defaultFormatter": "JamesBirtles.svelte-vscode"}  - i get a yellow squiggly line under the JamesBirtles string - it says value is not accepted

Hi Aidan, regarding the eslint with the double check marks at the bottom right of VSCode, I think you may need the standard eslint extension installed into VSCode from the marketplace, the extension author's name is Dirk Baeumer.Regarding the "editor.defaultFormatter" settings, this is so you can enable "Format on Save" for .Svelte files, which is a pretty nice feature because it auto formats every time you save a svelte file. I noticed it worked without that setting on some VSCode versions and other newer, versions needed that setting. So if format on save is working without that setting, then I think you can skip that one.Also, make sure that you have the Svelte extension from JamesBirtles installed from the market place. Here's my full settings file:// Place your settings in this file to overwrite the default settings
{
  "files.associations": {
    ".vue": "html",
    "*.vue": "html"
  },
  "html.autoClosingTags": false,
  "git.confirmSync": false,
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "window.zoomLevel": 1,
  "editor.autoClosingBrackets": "never",
  "editor.formatOnSave": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "prettier.jsxBracketSameLine": true,
  "prettier.printWidth": 300,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[svelte]": {
    "editor.defaultFormatter": "JamesBirtles.svelte-vscode"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}And I have the following 3 extensions installed:"Svelte" from James Birtles"ESLint" from Dirk Baeumer"Prettier" from PrettierGood luck!

Thanks very much for this, I have always found the eslint setup a bit confusing, I will checkout the above tips! Really enjoying the course, very concise and enjoying svelte from a React background :)

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

Setting up a Formatter and Linter