So You Want to Build an App in ES6, Part Two
In the first article in this series, we discussed what ES6 was and some tools that we planned on using. Our goal with this article is to get started actually using the build tools.
You are going to need a few things in order to actively participate:
- A web server. This can be any Linux server or even a Windows server (with the appropriate software installed). It could even be a VM. The choice is yours.
- An understanding of Node, NPM, and Git. We will be using these tools to install a baseline repository.
- The following node modules: gulp, babel.
Getting Started
I've created a baseline git repository that you can use as a starting point. You are going to want to log into your server and do the following commands:
mkdir -p /path/to/working/directory
cd /path/to/working/directory
git clone https://github.com/jimpoulakos/baseline.git
cd baseline/
npm install
You should make sure that your /path/to/working/directory is in a place that you can serve web pages from, ie. /var/www
What happened here? We first cloned the baseline repository and then used the npm install command to install all of the packages we need in order to use this system. If you want to know exactly what was installed, you can look at the package.json file. You will see a number of packages in the "devDependencies" property.
Why did we do it this way? The end goal of this series is to help you build applications from the ground up in a consistent manner that can be replicated across projects while maintaining a common set of features and functionality. While we could just as easily have installed all of the packages manually, it's a better long-term solution to use a repository with a common set of features baked right in.
There are a large number of generators for this type of project. @stvnksslr has a great Modern Angular Seed which contains everything my baseline repository does, but also adds support for things like SASS and a more robust build system.
Configuration
I've done my best to make configuration as painless as possible. There are two main configuration files you are going to want to look at:
These files are used to set up gulp tasks and karma test configurations respectively. Gulp tasks are used to automate your build, while karma tests are used to make sure that the things you build meet your needs. We will go into these both a little more in-depth in future articles.
The gulp file contains three tasks: browserify, karma, and watch. We will use these tasks during development in order to get things built and deployed the way we want them to be.
Gulp Tasks
You can run gulp tasks manually by doing this:
gulp browserify
This will run the browserify task. It will takes all of our javascript files and bundle them up after turning them into ES5. We can do this every time we make a change, and we will have to do this every time we make a change that we want to see.
I don't know about you, but I am lazy. I don't like to do things repetitively. I certainly don't want to have to manually rebuild every time I make changes to my code. For this reason, we've created a watch task.
You can set up the watch task by doing this:
screen
gulp
That's it. The default task is set to automatically run the watch task. The watch task is set to watch the files in the source/ directory and run the browserify task any time it detects a change to any of the files.
I run my gulp watch in a separate screen on my server. The reason for this is that I can have the watch running in the background, while I continue to do things manually, like running my karma tests.
Customizing
The build paths I've set up may not suit your needs. You can change these by changing lines 7 and 8 in the gulpfile.js to your liking. The sourcePath variable holds the directory where the source files are located, while the distPath variable holds the directory in which the final, processed files will be located.
Karma Tasks
Once you are comfortable writing code, and having it built for you automatically, it's time for the bane of most programmers I meet: testing. Using Karma and Jasmine to test will allow you to write better code that is more maintainable and easier to fix.
You can run all of your karma tests with this command:
gulp karma
You can view my default configuration file here: karma.conf.js. This file includes information for injecting angular, your main build file, and all of your tests. It outputs code coverage reporters as well. If you need more functionality, for instance running against Chrome, you can add them by changing this configuration file.
Next Steps
In the next article in this series, we will go over building a simple application using Browserify, Babel, and Partialify.