DEPRECATED

svelte-netcore-identity is no longer supported, please consider using sveltekit-netcore-identity instead.

git clone https://github.com/ludojmj/svelte-netcore-identity.git

The aim of this project is to gather, in a single place, useful front and back ends development tools:

  • A Database with SQLite;
  • A Web API server with .NET Core 6.x;
  • A Svelte JS client App;
  • A link to an external service for identity management, authorization, and API security.

Quick start (Development)

Server

cd <myfolder>/Server
dotnet run

Client

cd <myfolder>/client
npm install
npm run dev

Inspiration


Manufacturing process steps

>>>>> SQLite database

Overwrite database if needed

cd <myfolder>
sqlite3 Server/App_Data/stuff.db < Server/App_Data/create_tables.sql

>>>>> .NET Core 6.x Web API server

Create the server project

cd <myfolder>
dotnet new gitignore
dotnet new webapi -n Server
dotnet new xunit -n Server.UnitTest

Generate the model from the database for the Web API server

dotnet tool install --global dotnet-ef
cd <myfolder>/Server
dotnet ef dbcontext scaffold "Data Source=App_Data/stuff.db" Microsoft.EntityFrameworkCore.Sqlite \
--output-dir DbModels --context-dir DbModels --context StuffDbContext --force

Run the tests

cd <myfolder>/Server.UnitTest
dotnet restore
dotnet build
dotnet test
dotnet test /p:CollectCoverage=true

Run the Web API server

cd <myfolder>/Server
export ASPNETCORE_ENVIRONMENT=Development
dotnet run

>>>>> Svelte client App

Create the client project

cd <myfolder>
npm create vite@latest client -- --template svelte

Run the client App

cd <myfolder>/client
npm install
npm run dev

Client App settings

Development mode (<myfolder>/client/.env.development)
  • Client consuming an embedded mocked API (http port 5173)
VITE_API_URL="http://localhost:5173/mock/stuff"
  • Client (http port 5173) consuming a distant API (https port 5001)
VITE_API_URL="https://localhost:5001/api/stuff"
  • Client (https port 5001) and Server (https port 5001) together in the same Web app

==> Files inside "/client/dist" directory must be copied into "/Server/wwwroot" directory

==> See: buildall.sh

VITE_API_URL="https://localhost:5001/api/stuff"
Production mode (<myfolder>/client/.env.production)
  • Client and Server together in the same Web app hosted on a real domain
VITE_API_URL="https://www.example.com/api/stuff"

==> Files inside "/client/dist" directory must be copied into "/Server/wwwroot" directory

==> See: buildall.sh


Troubleshooting

Unable to register/update a service worker for scope 'http://localhost:5173/': Storage access is restricted in this context due to user settings or incognito mode.

When?

  • When using Firefox;
  • Running http://localhost:5173 (actually using http instead of https);
  • The website is stucked, you must open the debug console to see this message.

Why?

  • Firefox blocks third-party cookies between http and https.

How to solve?

An error occured. Please try again later.

When?

  • Creating a record in the SQLite database stuff.db running Linux on Azure;
  • The "real" error (not displayed in Production) is: SQLite Error 5: 'database is locked';
  • There is a restricted write access to the file on Linux web app when running on Azure.

How to solve?

  • ==> Either use a real database or deploy the web app on Azure choosing Windows OS.

SQLite Error 1: 'no such table: t_stuff'

When?

How to solve?

  • ==> Create the database stuff.db (sqlite3 Server/App_Data/stuff.db < Server/App_Data/create_tables.sql).

Network Error

When?

How to solve?

  • ==> Start the .NET server (dotnet run) before the Svelte client App (npm run dev).

Your connection is not private (NET::ERR_CERT_AUTHORITY_INVALID)

When?

How to solve?

Firefox

  • ==> Click Advanced settings button;
  • ==> Click on the link to continue to the assumed unsafe localhost site;
  • ==> Accept self-signed localhost certificate.

Chrome/Chromium - cf. issue

  • ==> In the browser, click "Not secure" in front of the uri https://localhost:5001/health;
  • ==> Click "Certificate is not valid";
  • ==> Click "Details" tab;
  • ==> Export the certificate as (for instance) "myLocalhostCert.crt";
  • ==> Then run in a terminal (the first command line may be useless if you've already got the certutil command):
sudo apt install libnss3-tools
certutil -d sql:$HOME/.pki/nssdb -A -t "P,," -n <nickname> -i <export_path>/myLocalhostCert.crt
  • ==> Close and reopen the browser;
  • ==> You can see your registered certificate (org-localhost) in: Settings / Privacy and security / Security / Manage device certificates / Server tab.

Chrome/Chromium - alternative fix - cf. issue

If you don't want to register the certificate, you can run Chrome/Chromium with --ignore-certificate-errors command line option:

chromium --ignore-certificate-errors

N.B. Replace "chromium" run command by your (depending on your distribution) actual Chrome/Chromium launcher: chromium-browser, chrome, chrome-browser or google-chrome, ...

You do not have permission to view this directory or page.

When?

  • Browsing the web site on a Azure Windows instance.

How to solve?

  • ==> Add the web.config file since you've got IIS running;
  • ==> On Linux, the web.config file is useless (Update your http headers according to the suitable Web Server configuration file).

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes