svelte-netcore-identity

Svelte Netcore Identity

DEPRECATED - CRUD: Svelte JS, .NET Core 6.x Web API, Identity, SQLite

#crud #sqlite3 #identityserver4 #sveltejs #net6 #archived #archived-repository #deprecated-repo #deprecated-repository
Download

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

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing
Loading Svelte Themes