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.- 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.
Create a folder structure as per the following an image in the host machine
- Add "express" npm packages as a dependency in package.json file
- Add "@babel/cli, @babel/core, @babel/node and @babel/preset-env" as a dev dependency in package.json file
- Add "nodemon" npm package as a dev dependency in package.json file
- configure npm build command to transpile src folder into dist folder using babel CLI
- configure npm dev command to use nodemon and bable-node CLI
- configure npm start command to run npm build command and serve "/dist" folder using node CLI
- write required code into src/utility/constant.js file to export a variable
- write required code into src/index.js file to expose an endpoint using express.js and import src/utility/constant.js file
- write required code into ".babelrc" file to set babel presets
- 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
- 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
11. Write following instructions in docker-compose yml file
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 :)
