Back to Homepage

Builds

If you're building anything more than just a static web page, build automation can be key to accelerating the development cycle of edit, run, debug. In today's activity, determine the following:

• Do you need to build?
• If so, what do you need to build?
• Will a simple npm build script work or do you need something more sophisticated?
• Will you adopt a continuous integration tool like CodeShip to streamline testing and releases?
• How will you integrate tests into your builds?

The simplest of build scripts can still have a lot of complexity. For example, here's an npm package.json file that Amy Ko uses to build her faculty web site which uses React and a variety of other dependencies:

{
	"name": "UWFacultyPage",
	"version": "1.0.0",
	"scripts": {
	    "build": "browserify -t [ babelify --presets [ react ] ] src/app.js | uglifyjs > build/app.js",
	    "watch": "watch 'npm run build' src"
	},
	"devDependencies": {
		"babel-cli": "^6.0.0",
		"babel-preset-es2015": "^6.3.13",
		"browserify": "latest",
		"watch": "latest"
	},
	"dependencies": {
		"babel-preset-react": "^6.5.0",
		"babelify": "^7.2.0",
		"react": "^0.14.0",
		"react-dom": "^0.14.0",
		"react-router": "^2.0.0",
		"history": "latest",
		"jquery": "^1.12.0",
		"bootstrap": "^3.3.6",
		"lodash": "latest",
		"uglify-js": "latest"
	}
}

When we execute npm run build, npm executes the command that we've named "build" above, which runs browserify. This is an npm package that first converts all of the JSX files in my source directly into JavaScript, then compiles all of the JavaScript files in all of those big source files into a single monolithic JavaScript source file, and then pipes that big file into uglifyjs, which minifies the big monolithic JavaScript file, shrinking variable names and removing unnecessary whitespace. All of this means that we only have to have a single JavaScript import in the main HTML file, and it's small, which accelerates page load.

Also note the watch command. It uses a command line utility called watch to run a build every time we edit a file in the src folder, so we always have a fresh build for manual testing.

You might not want or need all of the things above. You might also want more. What you do depends on the plans you've devised for coordination and testing.

For credit

Explain your build process to me or the TA for credit.