This post is a walkthrough of putting together a new application in the latest web technologies. Perfect for starting a new project! It’s incredibly easy with the new ASP.NET Core SPA (single-page application) templates.
The stack in use is as follows:
- Visual Studio 2017 or Visual Studio Code (optional, but nice for intellisense, debugging etc)
- React (client library for rendering your UI) and Redux (for handling state, allowing debug features like time travel)
- Webpack (for bundling/minifying your scripts, and hot module replacement)
- ASP.NET Core – letting us write our server in lovely C#! (Notably, server pre-rendering is available due to the AspNetCore.SpaServices assembly which calls into Node to execute scripts on the server)
Firstly you need to install the .NET Core SDK. The current version is 1.1. You can either install Visual Studio (if you are licensed for that) or just the command line tools. You can later install Visual Studio Code, the free cross-platform Visual Studio, if you like.
Now comes the fun part. We will use the ASP.NET SPA Services (Single-page application) generator to produce a ready-to-go, pre-configured application based on the client library we want. So, install both SPA Services and the Yeoman generator:
npm install -g yo generator-aspnetcore-spa
Now create a folder for your application, cd into it, and run the generator:
cd c:\appdirectory yo aspnetcore-spa
In my case I picked React with Redux. It then asks if you want the ‘project.json’ or ‘csproj’ project format. csproj is the one to go with if you’re using Visual Studio 2017. Type a project name and you’re done.
Once the process completes you’ll have a project setup and ready to go:
Before running, you will want to switch to development mode. This allows dev features like hot module reloading to work:
To run the project, you have two options. Either open the csproj in Visual Studio 2017 and hit F5 to start debugging, or back in your console, run:
Either way the server will start on port 5000, so have a browse of it. There’s a little basic application for you to muck about with:
Click ‘Counter’ and there’s a button that increments a variable:
Now open ClientApp/components/Counter.tsx. This is the TypeScript React component for the counter. We’ll test out the hot module reloading by editing that component to add another element to the page:
Webpack at this point detects the file change, the client downloads it, and Redux is able to maintain the state and update the page:
Another major win when using a state manager like Redux is Time Travel. Time Travel is when the state of your app is recorded throughout the lifetime of the app, and you can use a timeline to move the state of the app backwards and forwards in time.
To try it out, click the ‘Increment’ button a few times. The tools are already recording the state changes and you’ll see the ‘INCREMENT_COUNT’ action appearing along within a timestamp.
Make sure the slider is show by clicking the slider button:
And then just move the slider around to travel through time. You can also click on an individual action in the list on the left to jump to the state at that time.