ASP.NET / PostgreSQL / Svelte Web app

The foundation for a fullstack web app using ASP.NET / C#, Postgres, and SvelteKit.

Overview

This is an MVC application which means that the frontend sends requests to the backend and the response is displayed in a UI to the user. The example provided is in the form of a simple todo list app.

Frontend

The frontend uses SvelteKit as well as other NPM packages using Yarn.

• TypeScript
• Vite
• Tailwind CSS
• DaisyUI
• Axios
• ESLint
• Prettier

Backend

The backend uses ASP.NET through C# with Postgres for its database through Npgsql. This project is configured for Omnisharp, but your LSP or IDE shouldn't matter much.

Recommended tools

• VS Code
• Docker Desktop
• Beekeeper Studio for viewing the database
• Postman for testing the API if necessary

Recommended VS Code extensions

All of these extensions can be easily installed when you open this repo in VS Code.

• Svelte for VS Code
• TypeScript Next
• Tailwind CSS IntelliSense
• ESLint
• Prettier
• Todo Tree
• Git History
• Git Graph

Building

1. Install NodeJS, Yarn, .NET 7.0, and Docker Desktop if you haven't already.
2. Clone this repo. Usually with git clone https://github.com/njs-templates/aspnet-postgres-svelte.git.
3. Delete the .git/ folder from the project root. Alternatively, you can use degit to do this for you.
4. Open the root of this directory and run the following to download npm packages.

cd frontend
yarn

5. Create a .env file at the root of the project and fill out the values with your preferences. You can just copy the .env.example to make sure it works, but the username and password should be changed in a production environment.

6. While still in the root, run docker-compose up -d to create and run the Postgres database in the background. You can run docker-compose down to stop it.

7. While still in the root, run the following to install nuget packages. The aspnet-codegenerator is optional but recommended.

cd backend
dotnet restore
dotnet tool install --global dotnet-ef
dotnet tool install --global dotnet-aspnet-codegenerator
dotnet ef database update
dotnet run

8. Open localhost:[port] to make sure that the backend is working. Dotnet should tell you what port the app is running on if you're unsure.
9. Back in the root directory, run the following to start Vite and make sure that the frontend is working.

cd frontend
yarn dev

If you can see both pages and you can add, delete, and edit the todo items, you should be good to go.