Chizaruu/svelte-netcore-identity

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

All-In-One CRUD

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

• SQLite database powered by: https://www.sqlite.org
• Server based on API mechanisms of: https://reqres.in/api/whatever
• Svelte template client borrowed from: https://svelte.dev
• Identity service powered by: https://demo.duendesoftware.com
• Identity client borrowed from: https://github.com/AxaFrance/react-oidc
• CSS borrowed from: https://getbootstrap.com
• SVG borrowed from: https://creativecommons.org

---

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:3000/': Storage access is restricted in this context due to user settings or incognito mode.

When?

• When using Firefox;
• Running http://localhost:3000 (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?

• Allow your website (http://localhost:3000) to use cookies and site data;
• Click to see how to proceed: https://support.mozilla.org/en-US/kb/block-websites-storing-cookies-site-data-firefox

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?

• Running the Svelte client App (npm run dev);
• Connecting to: http://localhost:5173/.

How to solve?

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

Network Error

When?

• Running the Svelte client App (npm run dev);
• Connecting to: http://localhost:5173/.

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?

• Running the .NET Core server (dotnet run);
• Connecting to: http://localhost:5000/swagger;
• Or connecting to its redirection: https://localhost:5001/swagger.

How to solve?

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

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).