Automating builds is an important part of the workflow for developers of all types as it saves you a bunch of time that could be better spent refactoring code or enjoying your cup of coffee! There are a lot of tools out there that you can use in the automation process, such as Gulp for Node projects or bash scripts for pretty much anything, and they can all accomplish something different. In this post, I'll go through writing a bash script to automate the build of a Node app. The script will compile the JSX files to JS files, minify our files, create a zip file, and deploy it Amazon Elastic Beanstalk. Just a sidenote, I won't be creating any of the required files, I'll be writing under the assumption that you have files ready.
Setting Up Our Environment
It's important that you know the folder structure of the project so I have included the one this post will be based off of below. It is pretty representative of what a simple Node application folder structure might look like.
root / | - pre-compiled / | - App | - Redux | - resources / | - css | - images | - build / | - index.js | - package.json
It's nothing too complicated, just a pre-compiled folder that holds our JSX files that will be compiled into the build folder and a resources folder to hold our assets.
Before we get into writing the bash script, there are a few modules I'll be assuming you have installed already, which are the AWS Elastic Beanstalk CLI and babel-cli. There is a tutorial to install the AWS EB CLI here. And for babel-cli, you can easily install it if you have npm, with the command
npm install --global babel-cli. The global parameter lets you use it from outside your current project.
If you've never used the AWS EB CLI before, you'll need to configure it before it can run. Once you have it installed, simply type
eb init and it'll take you through the process of selecting a region to deploy your app on, entering your secret key, choosing a platform for your app (we're using Node), and a few other things. Once you have that done, we can start on the script!
Starting the Script
To make the process easier, I'll break the script up into sections and explain each part as we go. The first thing we'll do is declare a variable and compile our JSX files.
\#!/bin/bash DIR=~/Documents/root babel --no-comments --minified $DIR/pre-compiled -d $DIR/build/components
The first line,
\#!/bin/bash, is called the "sha-bang" and is necessary for the bash script to run. It tells the command line which interpreter to use to run the script and since we're writing a bash script, we point to the bash interpreter.
In the next line, we create the variable
DIR, which points to the directory our Node app is located in. There is no keyword necessary to create variables in a bash script, you just set the value to whatever it is you want, kinda like Python. There is one caveat in that you can't have spaces between the "=" and what around it, otherwise the interpreter will think you are trying to run a command named "DIR".
The next line has a lot more going on compared to the ones before it, but don't worry, it's pretty easy understand. The first thing we do is call the babel command (the one we installed earlier with npm) and pass two option parameters,
--minified. Those are pretty self-explanatory, they tell the compiler to remove all comments from the files and minify each file as it is being compiled.
In the next part,
$DIR/pre-compiled, the "$" tells the interpreter that the next string is a variable (it knows to stop at the "/" since that isn't a valid character in a variable name). This command as a whole tells babel to look inside the specified directory for JSX files. Finally, with
-d $DIR/components, we tell babel to output all the compiled files into the directory specified. The folder structure, when compiled, we remain the same as before.
Prepping for the AWS Upload
The AWS EB CLI makes uploading files a breeze since it automatically zips everything up for you, as long as what you want to upload is in the same directory. In our case, we'll be using the root directory, and so far, we only have our compiled JS inside. Now let's copy the rest of our files to it.
cp -r $DIR/resources $DIR/build cp $DIR/index.js $DIR/build cp $DIR/package.json $DIR/build cd $DIR/build
We're making heavy use of the
cp command, which copies files from one place to another. The
-r parameter tells it to recursively search the folder specified,
$DIR/resources, and copy all files and folders inside to
$DIR/build. When the
-r parameter isn't specified, you can only copy things one file at a time.
The next command we use,
cd, tells the command line to move into the specified directory and execute all following commands relative to that directory. In this script, we used direct paths for referencing files, but
cd is very useful for moving between directories so you only have to specify relative paths.
Finally, we can deploy our app to AWS with one simple line.
The Home Stretch
Now that we have our file completed, we have one more step left to do before we can run the script. To give the system permission to run the script, first make sure you
cd into the folder containing your script and then run the command
chmod -x build.sh. Without executing this command, you will get a permissions error when you try to run the script. Now that the script is complete, you can run it by executing
./build.sh if you are in the same folder as the script. You need to preface the name of the script with './' to let the system know you
really meant to run the script so you don't accidentally run scripts.
Congratulations! You just finished an auto-deployment script! Now whenever you want to redeploy your application, you just have to run one command instead of manually copying files and folders yourself. This script was pretty tame in comparison to some I have seen and written, but it's a good introduction to the process and gets you familiar with the basics of bash scripts. In the future, we'll go through writing more complex scripts that do accomplish a lot more of the build process.