aspnet-practice

The goal of this project is to create the architecture for a real-time web app that uses ASP.NET for the backend, React on Typescript for the frontend, SignalR to communicate between these layers, and finally docker to host the app.

This has been one of the hardest projects I have worked on in a while. I have never worked with any of these components before this project and I do not know any else that has. So I made many, many mistakes along the way that often resulted in undocumented errors. I will do by best to back fill as much information as I can in this readme file. Now that I have come out on the other side I am glad I struggled through it.

Run

Prod

• clone this repo to your machine.
• install docker and docker-compose
• open repo in terminal
• cd Containers/Prod
• docker-compose up -d
• open localhost in a browser (continue on passed security warning generated since my cert is self signed) STOP with: docker-compose down

Dev

• clone this repo to your machine.
• install docker and docker-compose
• open repo in terminal
• docker
• cd Containers/Dev
• docker-compose up -d
• open localhost in a browser (continue on passed security warning generated since my cert is self signed) STOP with: docker-compose down

Development Notes

initialize project

• create a github repo
• add the following folders in the root directory:
  • Certificates
  • Containers / Dev
  • Containers / Prod
• dotnet new react -o
• cd /
• rm -r ClientApp
• npx create-react-app --template typescript
• find all references to "ClientApp" in source code and change to
• add signalr
• add docker containers (see docker manangement section)
• make app secure (see make app secure section)

Docker Management There are two containers: one for production and one for development. The production container files were autogenerated using visual studio code built in docker tools. The development container binds source code to the container and uses file watchers to ensure more rapid development. See Containers > Dev to see how the dev container is configured.

Using Development Container:

• in Containers/Dev/ run "sudo docker-compose up -d --build" In the future no build will be necessary at all. The image will be hosted on a global registry.

Make App Secure For development purposes this app will just use a self-signed certificate. You can do the following to get everything set up.

• if on ubuntu open the Certificates folder in the terminal. run "./generate-cert.sh aspnet-practice".
• make sure all generated files are handled by gitignore
• make sure docker compose env file has path to certificates.
• in chrome add myCA.pem to the authorities section on managed certificates.

Mistakes to Look Out For

• hosting the React frontend and ASP.NET backend in separate containers. this worked out really well for me until I tried to make it secure. You have to add a CORs policy to the backend which is not bad at all, but then if you want use SSL CORs fails to allow specified origins and I have not been able to determine why. On top of security issues, it is bother some to effectively network the containers together so that signalr can work. When the frontend and backend are in the same container, the cross origin requests dont occur and signalr can magically just work.
• use absolute urls when mounting the ssl certificate to the docker container using volumes. I tried to use ~ and ${HOME} shortcuts and the container crashed every time with a very obscure error. Effectively the ssl certificate could not be found.