7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.6 Front-End Setup

Before we start writing our front-end code, we'll have to install a few packages. Instead of using a build system to convert ES6 to ES5, we'll be using npm scripts. I'll show you how to set those up in this lesson.


Windows users should use escaped double quotes for the watch command, instead of the code shown in this video.

"build": "watch \"npm run build:js\" ./src"

1.6 Front-End Setup

Before we start writing our front-end JavaScript, we're going to have to add a couple of NPM packages to our project. And we need these packages for two reasons. First of all, when I'm building with React, I like to require packages in the node fashion. So we're going to include the Browserify package so that we can write code in the style of node modules and then use them in the browser. Second of all I want to use ECMAScript 6 for this project. And to do this, we're going to need to use the Babel project so that we can convert our ECMAScript 6 code into ECMAScript 5 that our browsers will be able to run. So let's install those in this video. We'll start by installing Browserify and don't forget to use the --save-dev flag to save it to our development dependencies. After that has installed, we can go ahead and install Babelify. Now, Babelify is a version of Babel that will work with Browserify as one of Browserify's transformers. So, this will make it really easy to both transform our code from node style to browser style, and also from ES 6 to ES 5 in one go. Finally I want to be able to set a watch task running, which will watch our source directory and recompile our files whenever we make a change. Normally you would use something like Grunt or Gulp to do this. However recently I've been experimenting with build processes that just use NPM scripts. And so we're going to forego any of the traditional build systems like Gulp or Grunt in this project. Instead I'm going to install the watch package. And this will give us the ability to watch a directory and rerun a task when some file in that directory changes. Now as I just mentioned we're going to be using NPM scripts. And so what I need to do is open up our package.json file and add our scripts to the scripts property. As you can see right now in our package.json file, we have all of our dependencies and dev dependencies listed. So that means we've been doing our work correctly up until this point. Actually, we have express as a dev dependency instead of a dependency. That's not right, so let me move express down to the dependencies object. Okay, with that in place, we can now add our scripts. We don't need this test script, so I'll get rid of that. Lets add a script called build:js. And this is what we'll use to compile our JavaScript. So called the Browserify command. Note that we do not need to have this installed globally. We just have our local Browserify package installed and any of these NPN scripts will know to look for binaries inside of our node modules directory. And I think this is really handy. We can just install these commands locally within our project and we don't have to worry about our global environment at all. So we can say browserify. And the file that we're going to want to recompile is in the source directory/app.js. We haven't created this file yet but that will be the starting point for our application. Next we want to use a browserify transform. In our case that's babelify. So I'll include the dash T flag. And then within square brackets. We will include our transform. Now we're going to want to include one of the optional features of babelify and this is because of the way react works in ECMAScript 6. React classes are much easier to write if we can add class properties to our JavaScript classes. However ECMAScript 6 class support doesn't support class properties. So we're going to have to include the optional flag es7.classProperties. And this way, we'll be able to use these class properties in our JavaScript code and Babelify will compile them for us. Finally, we'll give Browserify an outfile flag and we are going to send this JavaScript to our public/all.js file. Now this build:js task will compile our JavaScript, but it will only do it once. This does not do the watching for us. So let's add a second script here which we'll just call build. First, call the watch command, and then we have the command that we want to run every time the files change. So for us that's N.P.N. run build:js. The last argument is the directory that watch, should watch. And in our case that's our local source directory. Now with those two tasks in place, we're all ready to go. All we have to do is call npm run build from the terminal, and that will watch our files, or at least it will if we don't get any errors. As you can see right here, we have the error that there's no directory resource. So I'll go ahead and make that directory. Now if we try and run it again, it looks like we get another error. I think this error is because we don't have our app.JS file, which is the file that Browserify is trying to compile. So let me go ahead and open up our src/app.js, and we'll just create a very very basic JavaScript file here. I'll just give it a single variable. And we'll just call app. So now if we flip back to our other tab here you can see that we're still getting a lot of error output even though it does seem like it's trying to run, it's failing. So, let me see. If I open up our package.json file and take a look at our build, js task, it looks like I added an extra space between the dash and the T. Okay, so if I go ahead and correct that. And now let's try one more time, npm run build. There we go. It looks like our task is running successfully. If I add something else to our @.js file, you can see that the task is rerun. As a final measure to make sure this is working, let me count out our public/all.js file. As you can see, we have some Browserify bootstrapping code at the top and underneath that you can see that we have the code that we wrote our app variable and our comment. Excellent. So that means that we are successfully compiling our code. Which means we can start writing actual features next.

Back to the top