Description: In this post I'm gonna show you how to create Docker Image for Nodejs project using Grunt.
Note:
Grunt: Its a Javascript task runner. In this project we'll use for minification of our .js file.
Docker: Its a platform where we gonna place containerised image of our NodeJs Project.
Github Project
So lets get started.
Step 1: Create index.js
//Import Express
var express = require('express')
var app = express()
//Import Path
var path = require('path')
//Mounting our .js from build folder.
app.use("/build", express.static(__dirname + "/build"))
//Capture the base url
app.get('/', function(req, res){
res.sendFile(__dirname + "/index.html")
})
//Listen on port 9000
app.listen(9000, function(){
console.log('Lisening on port 9000')
})
Note: build folder will be created after we run our Gruntfile
Step 2: Create package.json
{
"name": "demo-docker-nodejs-grunt",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "grunt uglify",
"start": "node index.js"
},
"author": "coderconsole",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"grunt": "^1.0.4",
"grunt-cli": "^1.3.2",
"grunt-contrib-uglify": "^4.0.1"
}
}
Note:
dependencies: Its contains all the dependencies we needed within the project.
scripts: Its contains grunt uglify to minify our .js and and start to start the nodejs app.
Step 3: Create Gruntfile.js parallel to package.json and echo.js within src/ folder(just to separate our code structure)
Gruntfile.js
//Setting grunt
module.exports = function(grunt){
//Setting Init Config from package.json
grunt.initConfig({
//Read package.json and assign it to 'pkg'
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/echo.js',
dest: 'build/echo.min.js'
}
}
});
// Load "uglify" task
grunt.loadNpmTasks('grunt-contrib-uglify')
// Load default task
grunt.registerTask('default', ['uglify'])
};
echo.js within src/ folder
function echoNameFunction(data) {
return "<h2>Welcome " + data + "</h2>"
}
Step 4: Create Dockerfile
# Select the Node Module FROM node:11 # Add the working Directory WORKDIR /app # COPY out package.json to our working directory /app COPY package*.json /app/ # RUN npm install which will download all the dependencies from package.json RUN npm install # COPY the current content to /app folder structure COPY . /app/ # UGLIFY the src/*.js RUN npm run build # EXPOSE our port EXPOSE 9000 # Create EntryPoint of index.js file ENTRYPOINT ["node", "index.js"]
Note: Dockerfile contains steps which get executed sequentially. Please read comments for what each steps does.
Step 5: Create index.html
<html lang="en">
<head>
<script src="build/echo.min.js"></script>
<script>
function display(){
var name = document.getElementById('firstname').value
document.getElementById('display').innerHTML = echoNameFunction(name)
}
</script>
</head>
<body>
<label for="firstname">Enter your first name</label>
<input id="firstname" name="firstname" type="text"/>
<button onclick="display()">
Click!
<p id="display"></p>
</body>
</html>
Step 6: Create .dockerignore file to avoid node_modules or build folder get added into the image
**/node_modules build/*.js .idea/
Step 7: Finally, lets create our docker image and run it using below command.
Build Docker image
docker build -t docker-node-grunt:1.0.0 -f Dockerfile .
Run Docker image
docker run -p 9000:9000 docker-node-grunt:1.0.0
Now, open browser and hit url http://localhost:9000/
Bingo! We've successfully deployed our nodeJs application in docker using grunt.
Github Project
#codingIsAnArt
