sveltekitapp

This is a sample notepad application that uses SvelteKit with TypeScript on the front-end (UI) and on the back-end (API).

Environment Prep

Once you have cloned the repo, you will need the following tools for local development.

Node and npm

You should install NodeJS and npm.

These are the current versions on the front-end components:

• SvelteKit next - docs
• Bulma v0.9.2 - docs

Visual Studio Code (VSCode) Setup

You can use any IDE, but here is what you need for VSCode. It was quite a challenge getting ESLint to work properly when the .eslintrc.js file is not in the root of the project - the trick was the "eslint.workingDirectories" setting. All the settings are included in the .vscode/settings.json file. I use VSCode open only to the root of the project with no other projects. I recommend the following VSCode extensions:

• ESLint

Environment Variables

Create a file in the root of this project called .env, and paste in the following:

# Encrypt server cookie.
VITE_SESSION_SECRET="32 character password here"

NPM Commands

Start Services

You can run these commands to start the services.

# Start the application.
npm run dev

# You can now open your browser to: http://localhost:8080/

Project Status

This project uses SvelteKit which is not at v1.0 yet as of (5/29/2020). You can see the status of the 1.0 milestone here.

Storybook currently doesn't fully support SvelteKit because of the common module imports, but it should soon.

Here are a few good resources on SvelteKit:

• SvelteKit FAQ
• Svelte Integrations
• Svelte Preprocessor
• SvelteKit Starter Template

Additional Documentation

This is one repository of a few that demonstrate with different front-end frameworks how to build a notepad application with authentication. A few of the other repositories are:

• Vue and Go
• Mithril and Go
• Mithril (TypeScript) and Go
• React (TypeScript) and Go