This is a demo project which can be used as a quickstart in the technologies used or simply as a repository of code snippets that can be copy&pasted into another project.
The main stack of technologies that you will find in this project is:
- .NET 6
- Angular 11
- SQLite
- nginx as reverse-proxy gateway
- Angular Material Theme
- Customizable fonts and colors with variables that can be reused throughout all the UI
- UI client API generator
- It uses the OpenAPI specification from the API to generate a full featured client with all the Typescript typings, ready to be used. Based on the tool openapi-generator
- It’s implemented as an Angular client but the same generator can be used for other frameworks or even for just for the typings and be used for any framework (Angular, React, Vue,...)
- Push notifications
- Socket client via SignalR
- UI integrated with Docker
- With hot reloading for development
- Multilanguage with ngx-translate
- Angular folder structure based on “shared”, “core”, “feature modules”, “pages” and “components”
- Authentication
- Based on token cookie and Authorization header token
- Keep alive process to refresh token
- Change password feature
- The UI autologs-in with a user called "Operator". There is no concept implemented of showing a starting login page (which is the most common scenario in a webapp)
- Authorization
- Based on Roles. Each user has a role assigned and the UI might restrict access based on that.
- Generic application form input
- Reusable input for all the application (text, numeric, date,...)
- Common style and validations
- Valid only for Reactive Forms
- .Net core API Authentication Integrated
- Implemented with SQLite database with users with login and password with Entity Framework
- Generates an HTTP Only Cookie Token and another Token that must be sent in each request
- The token per request expires after some time and must be "refreshed" by a keep-alive in the UI
- API with Swashbuckle to generate the OpenAPI specification and Swagger UI.
- Entity Framework with SQLite
- Used to store users and languages as an example
- Unit tests with xUnit
- Mock with SQLite Inmemory Database or real local database
- Authorization based on roles
Nginx configuration as a reverse-proxy gateway (as a separate docker service)
- Avoids CORS issues
- Exposes Frontend and Backend API from a single endpoint service
- Queries are redirected to the WebApp or API based on the url path.
- It can be used as a single point for HTTPS communication (not implemented)
You just need to install Docker
Run the command:
docker-compose -f docker-compose.yml -f docker-compose.dev.yml up --buildAfter running the command you can open your browser and see the WebApp:
Also you can open the API Swagger UI in:
http://localhost:8080/swagger/index.html
You will need to install libraries locally:
npm installThe Docker command has Hot Reloading so you can start modifying files and they will be visible in the UI.
After copying the new version of the API into this file:
src\app\core\api\api.json
You can regenerate the client like this:
npm run generate:apiResource keys are autogenerated from the code with some 'markers'. After doing your changes in code run command
npm run generate:i18nOpen the API solution with Visual Studio 2022 minimum. The backend does not have "watch mode" so every time is modified the docker command must be re-run.
Please see our Contribution Guide to learn how to contribute.
(LICENSE) © 2022 ERNI - Swiss Software Engineering
Please see our Code of Conduct
Erni_Services - @ERNI - [email protected]
Thanks goes to these wonderful people (emoji key):
 davidwalker2235 💻 🖋 📖 🎨 🤔 🚧 |
 Rabosa616 💻 🖋 📖 🎨 🤔 🚧 |
 Axel Taylor 💻 🖋 📖 🎨 🤔 🚧 |
This project follows the all-contributors specification. Contributions of any kind welcome!