It’s time to start the client!
Someone on reddit requested I use React for the front-end, so that’s what we shall do.
I’m not, however, going to be
using React.AspNet; (the React extensions for asp.net).
With that in mind, here is how to get started with a pure React client served from ASP.NET Core.
Create an empty ASP.NET Core Web Application with Yeoman
This tutorial shows how to do this brilliantly, so I won’t repeat. Come back once you’ve got your app generated. Make sure to pick the Empty Web Application option. We need the bare minimum.
Once you’ve got that up and running you need to…
Configure the app to serve static files from wwwroot
"Microsoft.AspNetCore.StaticFiles": "1.0.0" to your
project.json and restore that mother with
dotnet restore (thanks vscode for doing this automatically)
Now, in your
Startup.cs file, add
app.UseDefaultFiles(); //uses index.html as default file to serve. app.UseStaticFiles(); //enables static file serving.
to the bottom of your
Configure method. You can see mine here.
Go ahead and test it by throwing an
index.html in your
wwwroot folder and
dotnet run it.
Once that’s in place, it’s time to
So, Gulp. Gulp is a task runner. It automates tasks for you. In Visual Studio you can hit the play button and it will do things like compile your code, find errors, deploy to server, open a browser window, etc. Gulp is what we will use to do the same sort of stuff for the client-side.
First, you’ll need Node. Get it here and come back once you’ve installed.
Then in the command line, within the application root, you’ll use npm to install the dependencies we need. First, initialize npm in the application root. This will put a
package.json file in your root. It holds a list of your dependencies so that, for example, if you check in your code to source control, you can just check-in this file instead of the actual packages and libraries themselves. A developer on a different machine can just run
npm install and it will pull everything that is needed.
Then, install gulp, react, and the tools we will use to compile and bundle our code and reload the browser on changes.
Then, create a
gulpfile.js in the application root. Mine looks like:
The tasks I have created here do the following:
- move all
- transform react’s
- compile the .
.jsxinto a single
- Enable the CommonJS-style
requirestatements in the browser with Browserify
- watch for changes in html, js, and jsx and if a change occurs, apply the above tasks and reload the browser window with LiveReload
For the browser refresh to work, you’ll also need the chrome LiveReload extension.
If everything is working correctly, you should be able to put your index.html file in an src directory off of the application root and then run the dotnet server and gulp on the command line.
In the application root:
to serve from
wwwroot. Open the browser to the given path and start the LiveReload extension.
If all is swell, your
index.html file should be pushed to
wwwroot and the browser refreshed to reveal it.
Create your first React component
For the final step, we’ll create a simple header in React to set you on your way.
In the src folder, create a
header.jsx file like so:
Then, create another file called
Here you are including the header component and the React libraries needed to attach to the DOM. You’ll notice the
document.getElementById('app') statement. We’ll need to have a element in our index.html with that ID so React has a place to render.
Your index.html should look something like this:
Bare bones. Just a
Go ahead and take a peek at your browser window, if all is good, you should see the header we created!
Now we have a nice modern client-side dev environment set up so we can finish the front-end swiftly :).
Hopefully that was useful to some of you. I know there wasn’t much .NET in all of that. Let me know if you’d like me to add more details to this. Sign up to my list below to be notified about the final part in the series. It’ll be all React. I’ll add a handful of React components to implement the basic personal finance functions (adding transactions.)
Oh and hey, since I don’t have comments up, I posted the link to reddit (I’m pretty active there) so you can leave comments there.