DEV Community: Dev Chhaniyara

Docker + Angular + Nginx

Dev Chhaniyara — Mon, 23 Aug 2021 02:51:43 +0000

So recently, I have been digging into DevOps and Cloud Technologies and came across this service called Google Cloud Run which lets you host your application, but the only thing that bugged me was it required a docker image, and at this point, I had no idea what docker, containers, images or any of this words meant. 😕

So like any sane person with no social life on weekends 🤪 I started learning about Docker and at first, it did seem a little challenging but eventually, I think the process is quite easy and interesting.

So, if you have no idea about Docker and containers, I have put some links at the bottom which were super useful to me.

But here's a summary of Docker 🐳

Docker is a container runtime. That's it 🤯. It allows us to run containerized applications.

So what are containers? 📦

Containers are lightweight, portable and isolated processes running on your system using the same OS kernel and user space but each with its own set of specific dependencies that do not conflict with each other.

And Images? 🙄

A Docker image is a file used to execute code in a container. It contains application code, libraries, tools, dependencies and other files needed to run the application.

So without wasting any more time, let's get started with the main topic

Dockerizing an Angular application

Now obviously there are certain things you need to have installed in your system

Docker (Download link)
NodeJS (Download link)
Angular CLI (Download link)
Visual studio code (Optional) (Download link)

Step 1: Creating an Angular Application

This one is pretty basic, we aren't going to build anything fancy here, just the pre-built template will work for this tutorial.

To create your angular application, just open the terminal in the folder where you want to create your app, and write the following command.

ng new my-docker-angular-app

Now once this is done you should have an angular app generated, open it in VS code

Step 2: Creating Dockerfile and .dockerignore

Dockerfile

In the main folder of your application, create a new file and name it "Dockerfile". In the file, write the following commands

### STAGE 1:BUILD ###
# Defining a node image to be used as giving it an alias of "build"
# Which version of Node image to use depends on project dependencies 
# This is needed to build and compile our code 
# while generating the docker image
FROM node:12.14-alpine AS build
# Create a Virtual directory inside the docker image
WORKDIR /dist/src/app
# Copy files to virtual directory
# COPY package.json package-lock.json ./
# Run command in Virtual directory
RUN npm cache clean --force
# Copy files from local machine to virtual directory in docker image
COPY . .
RUN npm install
RUN npm run build --prod


### STAGE 2:RUN ###
# Defining nginx image to be used
FROM nginx:latest AS ngi
# Copying compiled code and nginx config to different folder
# NOTE: This path may change according to your project's output folder 
COPY --from=build /dist/src/app/dist/my-docker-angular-app /usr/share/nginx/html
COPY /nginx.conf  /etc/nginx/conf.d/default.conf
# Exposing a port, here it means that inside the container 
# the app will be using Port 80 while running
EXPOSE 80

DockerIgnore

If you have worked with git and know .gitignore, .dockerignore does the same thing, it specifies the files that we want to ignore while creating our docker image
Normally it may contain node_modules, test files, etc...
To create dockerignore, just create a file and name ".dockerignore"
For our application, just write the following inside the file

.git
.editorconfig
/.vscode/*
/node_modules
/e2e
/docs
.gitignore
*.zip

Step 3: Create nginx.conf

We'll be using Nginx to host the angular build inside the container. So for this, we need to create a configuration file for nginx.
Create a file inside main folder and name it "nginx.conf".

NOTE: We're telling nginx to listen to port 80 here as that is the port we had exposed in Dockerfile (refer). This needs to be same as what we defined in there

server {
  listen 80;
  sendfile on;
  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

Step 4: Creating a docker image

To create a docker image, open a terminal in your project folder and write the following command

docker build -t ng-docker-app:v1.0.0 -f ./Dockerfile .

-t: Tag (if not specified, docker will take "latest" by default)
-f: File (Write the path to your Dockerfile)

After this, we should have a docker image created in your system. To get the list of docker images in your system, write the following in the terminal

docker image ls

Step 5: Create a docker container

To create and host your docker container, write the following command

docker run -p 8000:80 -d ng-docker-app:v1.0.0

-p: Port
Here you'll need to define a port on which the container will be hosted and the port on which app is hosted inside the container
Syntex: <host-port>:<docker-port>
-d: Detach
If this is not specified, the docker will keep the console running

NOTE: We had exposed port 80 in Dockerfile and assigned nginx to listen to port 80, so <docker-port> has to be the same here as well

To get the list of currently running containers in your system, you can get this by typing

docker container ls

Finally

Voila!!🎉 If you have followed each step, you should have your docker container running on Port 8000 and your application running on localhost:8000 😎

Referances

How to install docker on windows 10?
How to install docker on Mac OS?
How to install docker on Ubuntu
Freecodecamp - What is docker used for?
Freecodecamp - Docker handbook
IBM - What is docker?

Basic JS Interview: var, let and const

Dev Chhaniyara — Tue, 30 Mar 2021 11:41:42 +0000

"What's the difference between var, let and const?". Okay, this is a question asked in almost all the javascript interviews and something I did get messed up in the beginning. So here let me show how I got my head around this topic with an easy example.

Before ES6, var was the only keyword you could use to declare a variable, but it had some problems. So in ES6, let and const were introduced to rectify those problems. Now let and const are almost similar in many ways so for the sake of simplicity I'll first get into differences between var and let and then move to let and const.

The first context in which var and let are different is how they interpret scope. What is a scope you may ask? Well in basic terms Scope determines the accessibility of variables to JavaScript.

In any programming language, there are 2 main types of scope.

1. Global Scope: Anything declared outside of all { } is considered to be in the global scope.
2. Local Scope: Anything declared inside any { }, that is considered to be in the local scope.

Here, var is function scoped which means it only recognizes functions as having a separate scope. This can lead to something like this

If you have used any other programming language you can see that i shouldn't be allowed to exist outside the loop but while being declared with var, it can. Now let's see how the same scenario will play out using let.

As you can see we get an error as i does not exist outside the scope of the for loop. The same type of scenarios can be generated using if statement.

The second context in which var and let differs is hoisting. Hoisting in itself is a little tricky to understand but in layman's terms Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. Variables declared with var are hoisted which leads to cases such as this

The output is undefined even though the variable is declared after we tried to print it, that is because during hoisting all variable and function declaration are moved to the top, also notice that we are getting undefined instead of 100, this is because hoisting only declares the variable it's assignment happens as per the normal execution of the code. But in many projects getting undefined instead of error can lead to problems, so this can be solved using let.

The third and last difference is variables declared using var can be redeclared without getting an error.

This can lead to major problems when you're dealing with files with thousands of lines of code (also please try to keep the variable name as meaningful as you can).

Alright, those were the major differences between var and let and coming to let and const. The only difference between let and const is that let can be reassigned and const can be not (mutable and immutable).

You can still change the values inside an object or array even though it is declared with a const keyword.

This is because of how memory allocation happens for those elements. Values here are stored as a reference and not as the actual value itself.

Conclusion
In this article, we went through the key differences between var, let and const as well as the basics of scopes and hoisting in JavaScript. As you saw, var had some issues and let & const are introduces to rectify those issue, so my suggestion would be to avoid using var as much as possible. I know there are still many legacy code projects that use var and will continue to do so, but at-least when building new projects, use the newer and cooler stuff 😎

References
Understanding Variables, Scope, and Hoisting in JavaScript | DigitalOcean

Var, Let, and Const - What's the Difference? (freecodecamp.org)

My first blog post

Dev Chhaniyara — Sun, 07 Mar 2021 20:43:12 +0000

So as you can tell, this is my first (ever) blog post, hopefully not the last, I'll most probably write about Web-Development, HTML, CSS and javascript in a fun way (will try to use a lot of memes) but as I learn new stuff, I'll try to write about them too.

So, will probably see you in the next post.

Cheers😉