fullstackproltd / AspNetCoreSpa

Asp.Net 7.0 & Angular 15 SPA Fullstack application with plenty of examples. Live demo:
https://aspnetcorespa.fullstackpro.co.uk
MIT License
1.48k stars 465 forks source link
angular angular-cli aspnetcore aspnetcorespa best-practices compodoc efcore globalization identityserver4 security spa typescript unit-testing

Actions Status Web Actions Status STS Build Status Build status MIT license

Features

Pre-requisites

  1. .Net 7.0 SDK
  2. Visual studio 2019 OR VSCode with C# extension
  3. NodeJs (Latest LTS)
  4. Microsoft SQL Server (Optional: If MS SQL server required instead of Sqlite during development)
  5. Docker (Optional: If application will run inside docker container)

Installation

  1. Clone the repo:

    git clone https://github.com/asadsahi/AspNetCoreSpa

  2. Change directory:

    cd AspNetCoreSpa

  3. Restore packages:

    dotnet restore AspNetCoreSpa.sln

  4. Install npm packages:

    • cd src/Presentation/Web/ClientApp:

    • npm install

  5. Start Frontend:

    • npm start
  6. Run Backend:

    • Using VSCode:

      • If you are running for the first time, install dev certificates using command:
      dotnet dev-certs https --trust
      • From debug menu select Web profile to run api application
      • From debug menu select STS profile to run Identity Server application
    • Using Visual Studio IDE:

      • Run Web and STS projects either individually or by setting multiple projects in solutions properties and hit F5
  7. Target either Sqlite or Microsoft SQL Server

This project supports both databases OOTB.

  1. Once the project is running use following test users to login:

    2 Test users: Username: admin@admin.com Password: P@ssw0rd! OR Username: user@user.com Password: P@ssw0rd!

    Note: For production use Identity server hosted with appropriate configuration.

Managing Migrations

Make sure you have ef core global tools installed

dotnet tool install --global dotnet-ef

Web Migrations

Using command line (from root of the project)

Create Migration

dotnet ef migrations add migrationname --startup-project ./src/Presentation/Web --project ./src/Infrastructure/Infrastructure --context ApplicationDbContext -o Persistence/Migrations

Update database

dotnet ef database update --startup-project ./src/Presentation/Web --project ./src/Infrastructure/Infrastructure --context ApplicationDbContext

Drop database

dotnet ef database drop --startup-project ./src/Presentation/Web --project ./src/Infrastructure/Infrastructure --context ApplicationDbContext

Localization Migrations

Using command line (from root of the project)

Create Migration

dotnet ef migrations add migrationname --startup-project ./src/Presentation/Web --project ./src/Infrastructure/Infrastructure --context LocalizationDbContext -o Localization/Migrations

Update database

dotnet ef database update --startup-project ./src/Presentation/Web --project ./src/Infrastructure/Infrastructure --context LocalizationDbContext

Drop database

dotnet ef database drop --startup-project ./src/Presentation/Web --project ./src/Infrastructure/Infrastructure --context LocalizationDbContext

Identity Migrations

Using command line (from root of the project)

Create Migration

dotnet ef migrations add migrationname --startup-project ./src/Presentation/STS --project ./src/Infrastructure/Infrastructure --context IdentityServerDbContext -o Identity/Migrations

Update database

dotnet ef database update --startup-project ./src/Presentation/STS --project ./src/Infrastructure/Infrastructure --context IdentityServerDbContext

Drop database

dotnet ef database drop --startup-project ./src/Presentation/STS --project ./src/Infrastructure/Infrastructure --context IdentityServerDbContext

Other commands

Angular component scaffolding

Note: You need to run commands from src/Presentation/Web/ClientApp directory: More information here

Angular tests - Using Jest and Angular jest preset

cd src/Presentation/Web/ClientApp

npm test

Compodoc Angular documentation

Compodoc documentation: alt text

### run end-to-end tests
```bash
# make sure you have your server running in another terminal (i.e run "dotnet run" command)
npm run e2e

run Protractor's elementExplorer (for end-to-end)

npm run webdriver:start
# in another terminal
npm run e2e:live

Azure Deploy

From powershell:
./deploy-azure.ps1

Deploy to heroku using its container service

Replace your app name where it is aspnetcorespa

Deploy to Azure as App Service

Set-Item -path env:AzureAppPass -value passwordhere

From powershell:
./deploy-azure.ps1

paypal