ASP.NET Core / React SPA Template
Update - I have updated this template and wrote about it here.
A few weeks ago, I really wanted to build something new. As I tweeted, I really wanted to build something as an excuse to play with some new tools. There are so many languages, frameworks, tools out there today for building software!
On the one hand, it is a bit overwhelming to keep track of all of this stuff and attempt to stay aware of it all. On the other hand, it’s tons of fun to play with different things.
Anyway, I bounced around some ideas, played with a few things and recalled my mental “I want to play with this” backlog and settled on building a SPA: ASP.NET Core on the server side for JSON/REST API and React as a web client. As I started setting up things, the application in particular quickly took a backseat to the technology stack setup itself. You know, getting the foundation laid with a skeleton/template project. That’s ok, it was fun and I learned a bunch of new things along the way. I ended up building a template project to build stuff with going forward. Here’s the repository: https://github.com/bradymholt/aspnet-core-react-template.
A few observations I had after going through the setup process:
- Web development has changed a lot in the last 5 years
- Web development has gotten a lot more complex in the last 5 years
- There is a ton of stuff to learn (and re-learn) to get a web application up and running
On that last point, just look at this survey of all the tools, technologies, concepts, etc. that went into my template project. Admittedly, I didn’t have to employ all of these but I do think this is a pretty realistic modern day web stack setup.
Server
- .NET Core
- ASP.NET Core
- Entity Framework Core
- Entity Framework Migrations
- OpenIddict (for JWT auth)
- REST
- PostgresSQL
- Docker for development PostgresSQL database
Web / Client
- Node.js / npm
- Webpack
- HMR (Webpack Hot module Replacement)
- Stylus/CSS
- CSS Modules
- TypeScript
- React
- Flux
- React Router
Testing
- xUnit for .NET Core
- Enzyme/Mocha/Chai for React
DevOps
- Ansible
- Docker
- Let's Encrypt (for SSL certs)
- PostgresSQL
- Nginx
- Supervisor (supervisord)
- Digital Ocean
Wow, that’s a lot of stuff! The end result though, is a pretty solid template to build apps with. Just about everything is baked in including asset bundling, database migrations, testings, DevOps scripts for provisioning and deployment. Also, the ASP.NET Core SpaServices support for Webpack HMR feels very productive: just fire up the server with npm start and everythng just works.
Demo
If a picture is worth a thousand words, a video is worth a million, right? Rather than walking through everything with a bunch of words and screenshots, I think a video might be best suited for showing the pieces to this template.