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).

I decided I didn’t want to mix MVC, razor pages, and React together, so instead I’ll just serve the static html, css, js from an aspnetcore kestrel server. I’ll jump out of Visual Studio 2015 and slide into Visual Studio Code with some modern javascript tech for the build process.

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

Add "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

Set up a javascript build process with Gulp

This next part isn’t entirely necessary but will level you up in your client-side dev skills. If you don’t care about that, skip this section and just reference the react libraries in your html just like you would any javascript lib.

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.

npm init

Then, install gulp, react, and the tools we will use to compile and bundle our code and reload the browser on changes.

npm install gulp
npm install --save-dev babelify babel-preset-react browserify gulp-livereload vinyl-source-stream
npm install --save react react-dom

Then, create a gulpfile.js in the application root. Mine looks like:

var gulp = require('gulp');
var livereload = require('gulp-livereload');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream'); 

var config = {
    paths: {
        html: './src/*.html',
        js: './src/**/*.js',
        jsx: './src/**/*.jsx',
        mainJS: './src/main.jsx',
        wwwroot: './wwwroot'
    }
}

gulp.task('html', function () {
    gulp.src(config.paths.html)
    .pipe(gulp.dest(config.paths.wwwroot))
    .pipe(livereload());
});

gulp.task('js', function () {
    browserify(config.paths.mainJS)
    .transform("babelify", {presets: ["react"]})
    .bundle()
    .on('error', console.error.bind(console))
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(config.paths.wwwroot + '/scripts'))
    .pipe(livereload());
});

gulp.task('watch', function() {
   livereload.listen();
   gulp.watch(config.paths.html, ['html']);
   gulp.watch(config.paths.js, ['js']);
   gulp.watch(config.paths.jsx, ['js']); 
});

gulp.task('default', ['html', 'js', 'watch']);

The tasks I have created here do the following:

  • move all .html files from src to wwwroot
  • transform react’s .jsx into javascript with Babelify
  • compile the .js and .jsx into a single bundle.js file
  • Enable the CommonJS-style require statements 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:

dotnet run

to serve from wwwroot. Open the browser to the given path and start the LiveReload extension.

then run

gulp

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:

var React = require('react');

var Header = React.createClass({
    render: function() {
        return (
            <div>
                <h1>YouReallyNeedABudget</h1>
                <p>A simple budgeting tool built with ASP.NET Core and React.</p>
            </div>
        );
    }
});

module.exports = Header;

Then, create another file called main.jsx:

var React = require('react');
var ReactDOM = require('react-dom');
var Header = require('./components/header.jsx');

var renderApp = function (accounts) {
    ReactDOM.render(
        <div>
            <Header />
        </div>,
        document.getElementById('app'));
}

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:

<html>
<head>
<title>YouReallyNeedABudget</title>
</head>

<body>
    <div id="app" />
    <script src="scripts/bundle.js"></script>
</body>

</html>

Bare bones. Just a div and the reference to the bundled javascript created in our Gulp task with Browserify.

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.

Other series posts: Part 1, Part 2, Part 3, Part 5