Fullstack Svelte Course Overview

Introduction

Setting up your local development environment

Setting Up a Svelte Local Development Environment

How to Initialize a Boilerplate Svelte Project

Setting Up a Formatter and Linter for Svelte Development

Setting Up A Development Environment

Setting up a Single Page Application Router

An Introduction to Svelte Routing for Single Page Applications

Creating a Front End Layout for Admin Pages

Front End Layouts - Creating Reusable Parent Components

Front End Routing

Using Front End Component Libraries for Svelte Development

Learn Svelte - How to Create a Basic Landing Page

Using Svelte to handle DOM events and bind inputs

A Guide to Handling DOM Events and Input Binding with Svelte

User Interface Styles and Interactions

Initialize an Express Node.js Project for Svelte Development

Creating REST API GET, POST, PUT, and DELETE Requests

School Lunch Data Model

Creating the Backend Application

Fetching Data from the Frontend with Axios

How to Use Axios to Fetch Data From APIs for Svelte Apps

Using Svelte Each Blocks to Iterate a List

Svelte 'each' Blocks - Loop Through an Array and Update a DOM

Using Svelte to Show and Hide Loading Spinner Icons

Externalizing Frontend Configuration

Fetching Data in the Frontend

Installing PostgreSQL Locally to Add Persistence to a Svelte App

Configuring Knex js Migrations for Database Management Scripts

How to Use Knex js in an Express Backend App

Adding Post, Put and Delete Endpoints to the Backend

Sveltekit Endpoints - How to Use Post, Put, and Delete

Adding Persistence with PostgreSQL

Cleaning Up the Front End of a Single Page Application in Svelte

Building a Form in Svelte That Lets Users Create Data Entities

The Lunch Week Details Component

Creating, Updating and Deleting Data in the Frontend

Securing the application with JSON Web Tokens

Securing a Svelte Application with JSON Web Tokens

Evolving the App to a Multi Tenant Architecture

Get Started Creating a Multi Tenant Application in Svelte

Creating a User Signup Flow for a Multi Tenant Svelte App

Securing the Application

Public Lunch Week Page

Public Lunch Menu View

Building Svelte Single Page Applications and Serving Static Files

Production Deployment

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

Now that we have reviewed the high-level design for the School Lunch application, we are ready to set up our local development environment and then start working with Svelte.

The first tool we need is Node.js. If you don't already have Node installed, head over to 

 to download and run the appropriate installer for your operating system.

Once you have Node installed, open your command line and run the command 

. If the installation was successful, this will print the installed Node version.

You will also need a code editor. If you don't already have a favorite installed, VSCode is a fantastic open-source code editor that works well for JavaScript projects like the one we'll be building.

---
title: Setting Up a Svelte Local Development Environment
description: Setting up your local development environment
privateVideoUrl: https://fullstack.wistia.com/medias/cq4qob8qna
isPublicLesson: true
---

### Local Development Environment Set-Up

Now that we have reviewed the high-level design for the School Lunch application, we are ready to set up our local development environment and then start working with Svelte.

The first tool we need is Node.js. If you don't already have Node installed, head over to <https://nodejs.org/en/download/> to download and run the appropriate installer for your operating system.

Once you have Node installed, open your command line and run the command `node -v`. If the installation was successful, this will print the installed Node version.

freeman-g

Now that we've covered the high-level design for our application, we can talk

So for our app, we will run a local Svelte environment and also a local Express

And for both of those, we'll need Node.js.

If you don't already have Node, head over to Node.js.org and download the

In addition to Node, we'll also need Git.

And we don't need Git from a source control perspective, but it's required for

step, which is the Svelte project initialization.

Of course, you can also use it for source control too.

And then this project will use a lot of command line operations.

And so optionally, it's nice to have a more powerful command line tool.

And for Windows, Commander is a good option.

And both of these offer tab-based command line instances.

So you can have multiple tabs or multiple command line instances open at once.

And this can be helpful when you're trying to run several things at once.

For Commander, you may need to edit your path system environment variable.

And essentially what this means is just pointing your path to the bin directory

For example, the node command and the git command.

And in my setup, I can run a node command from any directory.

And that'll tell me the version of node or any other node command.

And likewise, I can also run a git command from any directory as well.

So if you're having a little bit of trouble, you may need to look at some

figure out how to point your path to those executables that you want to run.

And then lastly, we're going to need a nice text editor.

And VS code is a fantastic open source option that's becoming really popular

And VS code lets you have multiple files open at once.

And it does a lot of really nice code highlighting.

There's various plug-ins that help you with formatting.

And it also has an integrated terminal and an integrated git instance.

And you can browse around the files on the left-hand panel here within your

you can pretty easily move in between files.

So, as we spoke before, the project will be organized into a school lunch

directory and then a backend directory and a front-end directory underneath

The source code for the backend express app and the front-end spelt app will be

So it will keep them separate from an organization perspective in the file

So we can go ahead for the last step in this lesson, we can go ahead and create

So I'm just going to run an MKDRE school lunch and that'll create that

Now in the next lesson, we'll initialize the spelt project which will create

directory and create a lot of boilerplate spelt files to get a spelt project up