Docker Assignments #18: Node.js, Express.js application using Nodemon and Babel

ES 2015+ features are not yet fully supported in  Node.js runtime.So, Babel will be used to convert code into backward compatible version of JavaScript. 

@babel/cli comes with built-in CLI which can be used to compile files from the command line. It's much better to install it locally project by project rather than global installation. 

There are two primary reasons for this.

• Different projects on the same machine can depend on different versions of Babel allowing you to update them individually.
• Not having an implicit dependency on the environment you are working in makes your project far more portable and easier to setup.

@babel/node is a another CLI designed by babel team to work exactly same as Node.js's CLI, only it will compile ES6 code by using Babel presets and plugins before running it. 

Create a folder structure as per the following an image in the host machine

1. Add "express" npm packages as a dependency in  package.json file
2. Add "@babel/cli, @babel/core, @babel/node and @babel/preset-env" as a dev dependency in package.json file
3. Add "nodemon" npm package as a dev dependency in package.json file
4. configure npm build command to transpile src folder into dist folder using babel CLI
5. configure npm dev command to use nodemon and bable-node CLI
6. configure npm start command to run npm build command and serve "/dist" folder using node CLI
7. write required code into src/utility/constant.js file to export a variable
8. write required code into src/index.js file to expose an endpoint using express.js and import src/utility/constant.js file
9. write required code into ".babelrc" file to set babel presets
10. Configure Dockerfile with below instructions
• set base image as "mhart/alpine-node"
• set working directory  as "/usr/app"
• write command to copy all files from host machine and npm install
• expose Port 9030
• set CMD command to execute npm run start


11. Write following instructions in docker-compose yml file
• Configure "testnodeexpress-service" service by specifying build context as Dockerfile
• specify bindmount to /usr/app container path
• specify volume mount to /usr/app/node_modules
• Expose port 9030 and 9229
12. Spin up container using docker-compose up command
13. Verify "/dist" folder created or not
14. check http://localhost:9030




Step 1:
    > npm i express


Step 2: 
     > npm install -D @babel/cli @babel/core @babel/node @babel/preset-env


Step 3: 
     > npm install -D nodemon


Step 4: 
"scripts": {
    "build": "babel src -s inline -d dist"    
  }     


-s parameter specified to generate sourcemap files as "inline" base64 string
-d parameter specified to store the location of traspiled files/folders (i..e "/dist" folder )

Step 5: 
"scripts": {
    "dev": "nodemon -L --inspect=0.0.0.0 --exec babel-node src/"    
  }     

Step 6: 
"scripts": {
    "start": "npm run build && node dist/"    
  }     

    

          Step 7: 

export const myname="Rama";

        Step 8:        

import { myname } from './utility/constant';

var express = require('express');

var app = express();

app.get('/', (req, res) => {

    res.send('Hello This  sample express app written by ' + myname);

});

app.post('/', (req, res) => {

    res.send(req);

});

app.listen(9030, () => {

    console.log('App listening on port 9030!');

});

Step 9:

{

    "presets": [

        "@babel/preset-env"

    ]

}

It is a preset with collection of babel plugins and poly-fills to use  the latest ES 2015+ features without needing to micromanage individual plugins/poly-fills 

Step 10:

FROM mhart/alpine-node

WORKDIR /usr/app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "run", "start"]

Step 11:

version: '3'

services:

    testnodeexpress-babel-service:

      build: .

      volumes:

        - .:/usr/app 

        - /usr/app/node_modules       

      environment:

        NODE_ENV: development  

      ports:

        - 9030:9030

        - 9229:9229

      command: npm run start      

   

Step 12:

  > docker-compose up

   we can even spin up docker containers by right click on docker-compose.yml in vscode and select "Compose up" option

Source Code available under https://github.com/ramasubbareddy1224/docker-node-babel

Happy Coding :)