Creating a Hello World project

To test that everything is building and running, we'll create a very simple two-file Hello World project and add our build script.

First, create two subdirectories under your Ch1-Ex1 folder: src and dist. We'll use this convention for all projects: src will contain JavaScript source code, dist will contain built source code and any additional assets (images, CSS, HTML files, and so on) required by the project.

In the src folder, create a file called greeting.js with the following code:

const greeting = name => 'Hello, ' + name + '!';
export default greeting;

Then create another file called index.js with the following:

import greeting from './greeting';
console.log(greeting(process.argv[2] || 'world'));

This small application tests whether we can use basic ES6 syntax and module loading, as well as access command-line arguments given to Node.js.

Next, open up the package.json file in Ch1-Ex1, and add the following section to the file:

"scripts": {
 "build-web": "browserify src/index.js -o dist/index.js -t [ babelify -  
  -presets [ env ] ]",
 "build-cli": "browserify src/index.js --node -o dist/index.js -t [  
  babelify --presets [ env ] ]",
 "start": "yarn build-cli && node dist/index.js"
},

This defines three simple command-line scripts:

• Build-web uses Browserify and Babel to compile everything that src/index.js touches into a single file called dist/index.js
• Build-cli is similar to build-web, except it also uses Browserify's node option flag; without this option we would not be able to access command-line arguments given to Node.js
• Start is intended only for CLI/Node.js examples, and both builds and runs the source code

Your package.json file should now look something like the following:

{
"name": "Ch1-Ex1",
"version": "0.0.1",
"description": "Chapter one example",
"main": "src/index.js",
"author": "Burak Kanber",
"license": "MIT",
"scripts": {
  "build-web": "browserify src/index.js -o dist/index.js -t [ babelify --presets [ env ] ]",
  "build-cli": "browserify src/index.js --node -o dist/index.js -t [ babelify --presets [ env ] ]",
  "start": "yarn build-cli && node dist/index.js"
},
"dependencies": {
  "babel-core": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babelify": "^8.0.0",
  "browserify": "^15.1.0"
}}

Let's put this simple application through a few tests. First, make sure that yarn build-cli works. You should see something like the following:

$ yarn build-cli
yarn run v1.3.2
$ browserify src/index.js --node -o dist/index.js -t [ babelify --presets [ env ] ]
Done in 0.59s.

At this point, confirm that the dist/index.js file has been built, and try running it directly, using the following code:

$ node dist/index.js
Hello, world!

Also try passing in your name as an argument to the command, using the following code:

$ node dist/index.js Burak
Hello, Burak!

Now, let's try the build-web command, as shown in the following code. Because this command omits the node option, we expect that our argument will not work:

$ yarn build-web
yarn run v1.3.2
$ browserify src/index.js -o dist/index.js -t [ babelify --presets [ env ] ]
Done in 0.61s.
$ node dist/index.js Burak
Hello, world!

Without the node option, our arguments are not forwarded to the script, and it defaults to saying Hello, world!, which is the expected result here.

Finally, let's test our yarn start command, using the following code, to make sure it builds the CLI version of the application and also forwards our command-line arguments, using the following code:

$ yarn start "good readers"
yarn run v1.3.2
$ yarn build-cli && node dist/index.js 'good readers'
$ browserify src/index.js --node -o dist/index.js -t [ babelify --presets [ env ] ]
Hello, good readers!
Done in 1.05s.

The yarn start command successfully built the CLI version of the application and forwarded our command-line arguments to the program.

We will try our best to use the same structure for each of the examples in this book, however, pay attention to the beginning of each chapter as each example may require some additional setup work.