Forem: Sanjay Saini

How to dockerize Mean Stack App?

Sanjay Saini — Sun, 30 Aug 2020 15:37:59 +0000

In this article I will explain to you how to dockerize Mean Stack App. step by step process from installing Docker locally to building Docker images using docker compose and running our Mean Stack App in the containers using the these images.

I had written Customer Store Mean Stack app that performs simple basic CRUD (Create, Read, Update, Delete) operations on the Customer model sometime back which I will be dockerizing here.

If you have some basic idea about Docker or have just heard about it and want to learn how to dockerize Mean Stack app then this article is for you.

What is Docker?

In brief, Docker is an open source DevOps tool designed to help developers and operations guys to streamline application development and deployment.

By dockerizing an application means deploying and running an application using containers.

Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and deploy it as one package.

By doing so application can be deployed on any target environment/machine regardless of any customized settings that machine might have that could differ from the machine used for writing and testing the code.

Thus removing the deployment issues that occur due to various environment spec mismatch.

To learn more about docker checkout this link.

Prerequisite

First, we need to have docker installed on our machine so that we can build docker image and run docker containers. There are different installation for Mac and Windows. For Windows 10 Professional and Enterprise install docker for desktop from this link but if you have Windows 10 Home edition like I have then you will have to installed Docker Toolbox from this link. Download the appropriate installer and follow the instructions.
We also need to have account at Docker Hub registry so that we can pull and push Docker images. It’s free so if you already haven’t one, checkout this link to create one for yourself.
Last, we need Mean Stack application that we want to dockerize. So if you already have one that’s great but if you don’t then you can get my Customer Store Mean Stack app code that I am using in this article from my GitHub repository from this link.

Launch Docker Machine

Docker machine is a small Linux VM that hosts the Docker Engine which is a client-server application consists of Docker Daemon and Docker CLI that interacts with Docker Daemon to create Docker images or running containers etc.

In case, you have installed Docker Desktop for Window or Mac when the installation finishes, Docker Machine is launched automatically. The whale image in the notification area indicates that Docker is running, and accessible from a terminal.
If you have installed Docker Toolbox then there are 2 ways to create docker machine locally.
- By double clicking on the docker Quick Start Terminal icon on your desktop.
- Using docker-machine CLI “create” command to create new Docker machine.

Since I have Docker Toolbox installed so I will choose the easy way and click on the Quick Start Terminal icon that will open the terminal and launch the Docker machine for me.

You can run following docker-machine CLI command to check the Docker machine details and note the URL that we will use to open our Mean Stack app in the browser.

$ docker-machine ls

You can do much more with docker-machine CLI commands like create, kill, start, stop Docker machine and much more but that is not in scope for this article however you can check-out docker.com for complete documentation on docker-machine CLI and also docker CLI as well.

Since now our Docker setup is up and running now we will focus on dockerizing our Mean Stack app.

Our Approach

Before we go further, I need to explain the structure of Mean Stack app and our approach to dockerize it. Mean Stack app has 3 components.

Client – which is written in Angular and provide User interface to backend.
Server – which is Restful API server build on Express framework to act as an interface to query and persist data in MongoDB database.
MongoDB – which is NoSQL database used to store data.

So when we think of dockerize Mean Stack app we have to dockerize these component or Docker image of these components are built (if not already available) and used by docker-compose tool to run multi container app from single command.

Get Started…

As per our approach we will perform following steps to dockerize our Mean Stack app.

Create Dockerfile for client and server each.
Create docker-compose.yml file for our app.
Build Docker images using docker-compose.yml file.
And last, run the Mean Stack app using Docker Compose tool.

So let’s get started…

1. Create Dockerfile

First we will create Dockerfile for our Client and Server in their respective folders which will be used to create Docker image for these components.

Dockerfile for Client

So in the terminal window change directory to client folder of you app and create a file name “Dockerfile” without any file extension using any dev editor like VS Code or just use Notepad.

Write following instructions in the Dockerfile and save it.

# Step 1
FROM node:12-alpine as build-step
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build

# Step 2
FROM nginx:1.17.1-alpine
COPY --from=build-step app/dist/client /usr/share/nginx/html

Explanation

In Stage 1 we are copying client code in the “app” folder and installing client dependencies from package.json file and creating production build using Node image.
In the Stage 2 we are using nginx server image to create nginx server and deploy our client on it by copying build items from /app/dist/client folder to nginx server at /usr/share/nginx/html location.

Create .dockerignore file for Client

Although it’s not necessary to have this file but it’s a good practice to have it since it can speed up image build process and also keep the image lean by excluding the unnecessary code from the Docker build context so that it doesn’t get into the image.

So just the way we created Dockerfile at the same location we create .dockerignore file and add following items that we don’t want to be copied into our docker image.

/node_modules
/e2e
.gitignore

Dockerfile for Server

Now in the terminal window change directory to server folder of you app (in my case its root folder of the app) and create another “Dockerfile” as we created for Client.

Write following instructions in the Dockerfile and save it.

FROM node:12-alpine as build-step
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
CMD ["node","server.js"]

Explanation

Here we are copying our server code in the “app” folder and installing server dependencies from package.json file and creating production build using Node image. Last we instruct to run the server when container is run.

Create .dockerignore file for Server

Like we did for Client, create .dockerignore file and add following items that we don’t want to be copied into our docker image.

.git
client
node_modules
.gitignore
*.md

Note that I have included client folder since in case of my app’s root folder contains the server code and the client folder so when I build the server image I want to exclude client code from it.

If you have separate folder for client and server code at the app’s root folder then no need to add client in the .dockerignore file.

2. Create docker-compose.yml file

Mean Stack app runs in multi container setup since it has multiple component as we discussed earlier we use Docker Compose tool to create a Docker images that spin off multiple containers from single command.

With Docker Compose tool we define all the components of the app as services in the docker-compose.yml file and build Docker images (if not available) of each component.

To learn more about Docker Compose check out this link.

So in the terminal window change directory to root folder of the app and create docker-compose.yml file.

Write following instructions in the docker-compose.yml and save it.

version: '3.7'
services:
  mongo-db:
    image: mongo
    ports:
      - '27017:27017'

  server:
    build: .
    image: sanjaysaini2000/meanstack_backend
    ports:
      - '3000:3000'
    links:
      - mongo-db

  client:
    build: client
    image: sanjaysaini2000/meanstack_frontend
    ports:
      - '80:80'

Explanation

We start with the version of the docker-compose file followed by the services section in which we define all the components of our app.

First we defined mongo-db service with the official mongo image which will be pulled from Docker Hub and will be used to run the container along with the port at which service will accessible to the server.

Next we defined server by providing build context as dot since our server code and Dockerfile is in the current folder. We also provide the image name (change it appropriately) that will be built and the port at which server will be accessible by the client.

We also linked this service with the mongo-db service since the server container will access MongoDB database in the separate mongo-db container

Finally we defined client by providing build context as the client folder that contains client code and Dockerfile. We also provide the image name (change it appropriately) that will be built and the port at which client will be accessible by the host.

Code Change

A minor code change needs to be done in the server where you are setting the connection string to mondoDB.

When we run our dockerize app each component will be running in separate container so server container will access the mongoDB hosted in the mongo-db container therefore we need to replace the localhost from the connection string with the mongo-db in the code.

mongodb://mongo-db:27017/

3. Build Docker Image

Now run docker-compose build command to build Docker images of services defined in the compose file that we have just created.

$ docker-compose build

This process will take some time to complete and at the end you will get successful message with image tag name for both client and server services we defined in the compose file.

Note that the process skipping mongo-db service since we are using already built official image in the compose file.

After build process is complete, you can run following Docker command to list the images created along with your client and server services images.

You will also find node and nginx images that we used in the Dockerfiles of client and server components of our app and an intermediate image . However these images are not required and can be deleted.

$ docker images

4. Run Mean Stack App

Finally run the following command in the terminal to run your Mean Stack app in the multi container setup with detached mode.

$ docker-compose up -d

Basically this command will spin off containers in the background as you can see from the screenshot above. It has run containers each one for our three services defined in the compose file.

Now open the browser and type URL http://<docker machine url>:80 in the address bar.

In my case it’s http://192.168.99.100:80

Congratulation…you have successfully dockerize and hosted Mean Stack app in a multi container setup.

To bring down the app and remove containers run following command.

docker-compose down

If you have Docker installed already and don’t have Mean Stack app or just want to first test run this app without going through this whole process than you can do so by pulling image from my Docker Hub registry from this link with the details about how you can run this app in containers locally.

Keep reading and learning…Cheers!!!

The post How to dockerize Mean Stack App? appeared first on Sanjay Saini’s Tech World.

How to dockerize ReactJS App?

Sanjay Saini — Sat, 18 Jul 2020 06:23:05 +0000

In this article I will explain to you how to dockerize ReactJS App from scratch.Some time back I had created a Todo App using ReactJS and wanted to dockerize it.

So one fine day while doing so I thought to note down the step as well and share it with fellow developers and the result is this article.

If you have some basic idea about Docker or have just heard about it and want to learn how to dockerize ReactJS app then this article is for you.

What is Docker?

Prerequisite

First, we need to have docker installed on our machine so that we can build docker image and run docker containers. There are different installation for Mac and Windows. For Windows 10 Professional and Enterprise install docker for desktop from this link but if you have Windows 10 Home edition like I have then you will have to installed Docker Toolbox from this link.
We also need to have account at Docker Hub registry so that we can pull and push Docker images. It’s free so if you already haven’t one, checkout this link to create one for yourself.
Last, we need ReactJS application that we want to dockerize. So if you already have one that’s great but if you don’t then you can get the ReactJS app code that I am using in this article from my GitHub repository from this link.

Get Started…

In order to dockerize our ReactJS App we need to perform following steps.

Launch the Docker machine.
Create Dockerfile in our Angular app folder.
Create Docker image from the Dockerfile.
And last, run the ReachJS Todo App in the container using Docker image.

So let’s get started…

Launch Docker Machine

In case, you have installed Docker Desktop for Window or Mac when the installation finishes, Docker Machine is launched automatically. The whale image in the notification area indicates that Docker is running, and accessible from a terminal.
If you have installed Docker Toolbox then there are 2 ways to create docker machine locally.
- By double clicking on the docker Quick Start Terminal icon on your desktop.
- Using docker-machine CLI “create” command to create new Docker machine.

Since I have Docker Toolbox installed so I will choose the easy way and click on the Quick Start Terminal icon that will open the terminal and launch the Docker machine.

You can run following docker-machine CLI command to check the Docker machine details and note the URL that we will use to open our ReactJS app in the browser.

$ docker-machine ls

You can do much more with docker-machine CLI commands like create, kill, start, stop Docker machine and much more but that is not in scope for this article however you can check-out docker.com for complete documentation on docker-machine CLI and also docker CLI as well.

Since now our Docker setup is up and running now we will focus on creating Dockerfile for our ReactJS app.

Create Dockerfile

Now in the terminal change directory to your ReactJS app folder and create a file name “Dockerfile” without any file extension using any dev editor like VS Code or just use Notepad.

Write following instructions in the Dockerfile and save it.

# Step 1
FROM node:10-alpine as build-step
RUN mkdir /app
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build

# Stage 2
FROM nginx:1.17.1-alpine
COPY --from=build-step /app/build /usr/share/nginx/html

Explanation

In Stage 1 we are copying our app code in the “app” folder and installing app dependencies from package.json file and creating production build using Node image.
In the Stage 2 we are using nginx server image to create nginx server and deploy our app on it by copying build items from /app/build folder to nginx server at /usr/share/nginx/html location.

Create .dockerignore file

/node_modules
/build
.git
*.md
.gitignore

Create Docker Image

Now run Docker build command to build Docker image of our app using Dockerfile that we have just created.

Note that I have given sanjaysaini2000/react-app as name to my Docker image but you must replace it with the name you want to give to your app’s Docker image.

Also note that image name must be followed by the dot which means that the path of the Docker build context and Dockerfile is the current folder.

$ docker build -t sanjaysaini2000/react-app .

This process will take 1-2 minutes to complete and at the end you will get successful message with image tag name.

You can run following Docker command to list the images created along with your ReactJS app image. You will also find node and nginx images that we used to create our app image and an intermediate image . However these images are not required and can be deleted.

$ docker images

Run Docker Container

Finally run the following command in the terminal to run your ReactJS Todo App in the Docker container and make sure to replace sanjaysaini2000/react-app with your image name in this command.

$ docker run -d -it -p 80:80/tcp --name react-app sanjaysaini2000/react-app:latest

Basically, we want to create and run an interactive container in the background so we have used options –d and –it with the Docker run command. Since app in the container is available at port 80 so we used –p option and map the container port to the external host port using 80:80/tcp and name our container using –name option to react-app followed by the image name.

Now open the browser and type URL http://<docker machine url>:80 in the address bar.

In my case it’s http://192.168.99.100:80

Congratulation…you have successfully dockerize and hosted ReactJS app in a Docker container.

This Docker image is also available at my Docker Hub registry as well. So if you don’t want to go through above process and only interested in test running this ReactJS app in the Docker container then You can get it from my react-app repository at Docker Hub registry.

Keep reading and learning…Cheers!!!

The post How to dockerize ReactJS App? appeared first on Sanjay Saini’s Tech World.

How to dockerize Angular App?

Sanjay Saini — Tue, 30 Jun 2020 12:50:09 +0000

In this article I will explain to you how to dockerize Angular App from scratch.

As you are checking out this article so I assume you have an Angular application that you want to dockerize and you might have same knowledge about Docker as well or at least have heard about it.

Anyways, what is Docker?

In brief, Docker is an open source DevOps tool designed to help developers and operations guys to streamline application development and deployment.By dockerizing an application means deploying and running an application using containers.

Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and deploy it as one package.

By doing so application can be deployed on any target environment/machine regardless of any customized settings that machine might have that could differ from the machine used for writing and testing the code.

Thus removing the deployment issues that occur due to various environment spec mismatch.

To learn more about docker checkout this link.

Prerequisite

First, we need to have docker installed on our machine so that we can build docker image and run docker containers. There are different installation for Mac and Windows. For Windows 10 Professional and Enterprise install docker for desktop from this link but if you have Windows 10 Home edition like I have then you will have to installed Docker Toolbox from this link.
We also need to have account at Docker Hub registry so that we can pull and push Docker images. It’s free so if you already haven’t one, checkout this link to create one for yourself.
Last, we need an Angular application that we want to dockerize. So if you already have one that’s great but if you don’t then you can get the Angular app code that I am using in this article from my GitHub repository from this link.

Get Started…

In order to dockerize our Angular app we need to perform following steps.

Launch the Docker machine.
Create Dockerfile in our Angular app folder.
Create Docker image from the Dockerfile.
And last, run the Angular app in the container using Docker image.

So let’s get started…

Launch Docker Machine

In case, you have installed Docker Desktop for Window or Mac when the installation finishes, Docker Machine is launched automatically. The whale image in the notification area indicates that Docker is running, and accessible from a terminal.
If you have installed Docker Toolbox then there are 2 ways to create docker machine locally.
- By double clicking on the docker Quick Start Terminal icon on your desktop.
- Using docker-machine CLI “create” command to create new Docker machine.

Since I have Docker Toolbox installed so I will choose the easy way and click on the Quick Start Terminal icon that will open the terminal and launch the Docker machine.

You can run following docker-machine CLI command to check the Docker machine details and note the URL that we will use to open our Angular app in the browser.

$ docker-machine ls

You can do much more with docker-machine CLI commands like create, kill, start, stop Docker machine and much more but that is not in scope for this article however you can check-out docker.com for complete documentation on docker-machine CLI and also docker CLI as well.

Since now our Docker setup is up and running now we will focus on creating Dockerfile for our Angular app.

Create Dockerfile

Now in the terminal change directory to your Angular app folder and create a file name “Dockerfile” without any file extension using any dev editor like VS Code or just use Notepad.

Write following instructions in the Dockerfile and save it.

# Stage 1
FROM node:10-alpine as build-step
RUN mkdir -p /app
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build --prod

# Stage 2
FROM nginx:1.17.1-alpine
COPY --from=build-step /app/docs /usr/share/nginx/html

Explanation

In Stage 1 we are copying our app code in the “app” folder and installing app dependencies from package.json file and creating production build using Node image.
In the Stage 2 we are using nginx server image to create nginx server and deploy our app on it by copying build items from /app/docs to nginx server at /usr/share/nginx/html location. Note – if you are using your Angular app then replace docs with dist/ in the Dockerfile because by default build items are created at that location. In my case I have changed it to docs folder in the outputPath setting of angular.json file in my app.

Create .dockerignore file

.git
.firebase
.editorconfig
/node_modules
/e2e
/docs
.gitignore
*.zip
*.md

Create Docker Image

Now run Docker build command to build Docker image of our app using Dockerfile that we have just created.

Note that I have given sanjaysaini2000/angular-app as name to my Docker image but you must replace it with the name you want to give to your app’s Docker image.

Also note that image name must be followed by the dot which means that the path of the Docker build context and Dockerfile is the current folder.

$ docker build -t sanjaysaini2000/angular-app .

This process will take 1-2 minutes to complete and at the end you will get successful message with image tag name.

You can run following Docker command to list the images created along with your Angular app image. You will also find node and nginx images that we used to create our app image and an intermediate image <none>. However these images are not required and can be deleted.

$ docker images

Run Docker Container

Finally run the following command in the terminal to run your Angular app in the Docker container and make sure to replace sanjaysaini2000/angular-app with your image name in this command.

$ docker run -d -it -p 80:80/tcp --name angular-app sanjaysaini2000/angular-app:latest

Basically, we want to create and run an interactive container in the background so we have used options –d and –it with the Docker run command. Since app in the container is available at port 80 so we used –p option and map the container port to the external host port using 80:80/tcp and name our container using --name option to angular-app followed by the image name.

Now open the browser and type URL http://<docker machine url>:80 in the address bar.

In my case it’s http://192.168.99.100:80

You have successfully dockerize and hosted angular app in a Docker container.

This Docker image is also available at my Docker Hub registry. You can get it from my angular-app repository if you don’t want to go through above process and only interested in running this Angular app in the Docker container.

I hope you have enjoyed this article…Cheers!!!

The post How to dockerize Angular App? appeared first on Sanjay Saini’s Tech World.

Deploy Mean Stack Application on AWS Beanstalk

Sanjay Saini — Mon, 27 Jan 2020 11:48:13 +0000

In this article I will share with you the steps I took after few failed attempts to deploy Mean Stack application on AWS Beanstalk.

Some time back I had developed a simple mean stack application (checkout the article) that performs basic CRUD operations on the Customer model.

I was looking ways to deploy it on AWS using its Elastic Beanstalk service but did not find any satisfactory solution explaining how to do that.

So I thought to write about my learnings and what changes I made in my existing mean stack application and what steps I took in order to deploy it on the AWS Beanstalk.

So let’s see what we need in order to deploy Mean Stack application on AWS Beanstalk.

Prerequisite

All you need is an AWS account and if you don’t have one, you can create a free tier account for free in few simple steps. Check out this link for more details.
I assume that you already have a mean stack application or you already have local development environment setup to develop one so that you can follow the code changes I am going to share with you here.

Deployment Steps

In order to deploy our means stack application on AWS Beanstalk we need to first make few code changes in our application.

Second, we have to login to AWS and configure Beanstalk service to deploy our application.

Code Changes

Open your application in the VS Code editor or any code editor that you are using.

Change in the Angular application code

I made few minor change in the Angular client application.

My client application has a service to provide CRUD operation and it makes http calls to Restful API hosted on backend server which listens at http://localhost:3000/Customers URL. This would have not worked once we deployed our application on AWS so I removed the localhost part of the API URL like below.

readonly APIUrl = " /Customers";

I also wanted to build my Angular app in the folder called public so I changed the ** outputPath ** value to public in the angular.json file of my Angular application.

"outputPath": "public",

That’s all the changes I made in the Angular application code.

Change in the backend server code

When we deploy mean stack application on AWS Beanstalk we need to choose Node.js environment that expects server.js or app.js files at the root to launch the server to host the application.

In mean stack applications backend server that hosts the Restful API is generally implemented either in server.js or app.js file as convention.

We need to make few changes in our server code so it can serve the requests to our Angular application as well.

So I added following code in the server.js file in which I had written my backend server code.

const path = require('path');
app.use(express.static(path.join(__dirname, '/public')));
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/public/index.html'));
});

Also installed path package to make this code work using following command.

$ npm install path –save

Change in Package.json file

There were 2 package.json files in my mean stack application.

One for Angular application in the client folder and another one for the backend server at application root folder.

Since I had to deploy single package.json file so I needed to collate all the dependencies for client and server in single package.json file.

So I copied all the dependencies required for Angular application from the client’s Package.json file and added them in the Package.json file that contains dependencies for my backend server.

    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.4",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"

And last, I made sure that the start script in the Package.json file should be having node server.js command.

Build Angular Client Application

Now I built the Angular client application by running following command.

ng build –prod

It created public folder under my Angular client application folder that I moved to the root folder of my mean stack application in the same level as server.js file.

Add Deployable artifacts in Zip file

Now I created mean-stack.zip file containing all the artifacts for my Angular client application (public folder) and my backend server.

Configure AWS Beanstalk service

After getting ready with my deployable zip file I logged into AWS console using my account credentials and from the services section clicked on AWS Elastic Beanstalk.

In order to host applications on the AWS Elastic beanstalk service we need to first create a beanstalk application in which you can create one or many environments to host your applications.

So I created application with customer-store name.

And then clicked on Create one now to create new environment for my mean-stack application that I wanted to deploy.

Next I chose Web Server Environment since I wanted to host web application and clicked on select button.

I entered the domain name customer-store that was available for my application. In Basic configuration section chose Node.js as Preconfigured platform.

In the Application code section, I chose Upload your code option since I wanted to deploy code from my local machine.

Then clicked on Upload button to upload the mean-stack.zip file that I had created earlier containing all the deployable artifacts for my mean stack application.

And last, I clicked on Create Environment button to let the Beanstalk service to configure environment and once the environment was ready it provided the URL to launch the application.

Below is the image of my mean stack application successfully deployed on AWS Beanstalk.

You can get the source code of this application from my GitHub repository mean-stack-aws-beanstalk and try yourself to deployed it on AWS.

Hope my article was clear enough to give an idea about deploying mean stack application on AWS Beanstalk…check out my other articles as well.

The post Deploy Mean Stack Application on AWS Beanstalk appeared first on Sanjay Saini’s Tech World.

Build Mean Stack Application

Sanjay Saini — Thu, 23 Jan 2020 15:59:04 +0000

In this article I will explain how to build Mean Stack application using MondoDB, Express, Angular and NodeJS. We will use Angular to develop frontend and NodeJS, Express and MongoDB to develop backend server of our CustoreStore mean stack application that will perform simple basic CRUD operations on the Customer model.

Let’s see what we need to build Mean Stack application from scratch.

Prerequisite

First, we need Node.js, which is JavaScript runtime installed on our machine. With Node.js comes NPM which is a node package manager that we will use to install other packages like Express and many others needed to develop this application. So download and install the latest Node.js available from this link.
We need code editor as well, I will recommend VS Code but if you already have any other code editor that you are using to write C# code then stick with that otherwise download and install VS Code from this link.
Last, we need to have MongoDB installed on the machine. You can download and install MongoDB community edition free from this link.

MongoDB Installation/Setup

Download and run the installer, select Custom option and follow the wizard instructions and keep the default setting as is. It will create data folder at C:\Program Files\MongoDB\Server\4.2\data to store databases and also start MongoDB Server as window service after installation is finished.

That’s all we need to do on MondoDB side for this application.

Now that we have setup our dev environment, we are ready to kick off writing code for our CustomerStore Mean Stack application which would look like the image below.

Get Started…

First, we will start with developing backend server that will be hosting a restful API exposing CRUD operations on MongoDB database using Express and Nodejs.

And then we will develop client frontend using Angular that will consume this restful API to perform CRUD operations exposed by this API. So let’s get started…

Build Backend Server

Start with creating project folder mean-stack that will contain code for our mean stack application and move into it.

$ mkdir mean-stack

$ cd mean-stack

Now we will start with creating package.json file which is the first building block for Node.js application and holds application configuration and package dependencies details that is required for the backend server. So open the command window in the project folder and run following command to create it.

$ npm init --yes

Install Express, Mongoose and body-parser

Express is a minimal and flexible Node.js web application framework that provides many features and HTTP utility methods and middleware to create a robust web API.

Mongoose is a MondoDB object data modelling package that provides a straight-forward, schema-based solution to model data in the Node.js application.

body-paser is Node.js middleware for parsing incoming request bodies in a middleware.

So install all these packages by running following command in the command window.

$ npm i express mongoose body-parser --save

Writing Code

Now open the code editor to start writing code. Run following command to start VS Code editor in the project folder.

$ vscode .

Create db.js file and add following code to create and export connection with MongoDB using mongoose.

const mongoose = require("mongoose");
mongoose.connect(
  "mongodb://localhost:27017/customerDb",
  { useNewUrlParser: true, useUnifiedTopology: true },
  err => {
    if (!err) console.log("Successfully connect to MondoDB...");
    else
      console.log(
        "Connection to MongoDb failed :" 
        + JSON.stringify(err, undefined, 2)
      ); });
module.exports = mongoose;

Create index.js file and add following code to create Express server to host our restful API. It will also import mongodb connection from db.js.

const bodyParser = require("body-parser");
const { mongoose } = require("./db");
const customer = require("./Controller/CustomerController");

const express = require("express");
const app = express();

//added middleware code
app.use(bodyParser.json());
app.use("/customers", customer);

const port = process.env.port || 3000;
app.listen(port, () => {
  console.log(`server listening at port :${port}`);
});

Now we need to create object data model to store Customer data in the MongoDB database. So create Models folder and create Customer.js file in it. Add following code to hold Customer model schema and export it as well.

const mongoose = require("mongoose");

var Customer = mongoose.model("Customer", {
  first_name: String,
  last_name: String,
  gender: String,
  age: Number,
  email: String
});
module.exports = { Customer };

The last piece of code is to add controller code that will expose our restful API endpoints. So create Controller folder and in it create CustomerController.js file. Now add following code for CRUD operations. Add following code to handle GET request to fetch the Customers.

router.get("/", (req, resp) => {
  Customer.find((err, docs) => {
    if (err)
      console.log(
     "Error while getting customers..." 
      + JSON.stringify(err, undefined, 2)
      ); else resp.send(docs);
  });});

To create new Customer, add following code to handle POST request from the client.

router.post("/", (req, resp) => {
  let cust = new Customer({
    first_name: req.body.first_name,
    last_name: req.body.last_name,
    gender: req.body.gender,
    age: req.body.age,
    email: req.body.email
  });
  cust.save((err, doc) => {
    if (err)
      console.log(
        "error in saving customers..." 
        + JSON.stringify(err, undefined, 2)
      ); else resp.send(doc);
  });});

Add following code to handle PUT request from client to update existing Customer.

router.put("/:id", (req, resp) => {
  let customerId = req.params.id;
  if (!ObjectId.isValid(customerId))
    return resp.status(400)
    .send(`Customer not found for id :${customerId}`);

And to handle DELETE request to delete the Customer, Add following code.

router.delete("/:id", (req, resp) => {
  let customerId = req.params.id;
  if (!ObjectId.isValid(customerId))
    return resp.status(400)
    .send(`Customer not found for id :${customerId}`);

  Customer.deleteOne({ _id: customerId }, (err, docs) => {
    if (err)
      console.log(
        "Error while deleting customers..." 
        + JSON.stringify(err, undefined, 2)
      ); else resp.send(docs);
  }); });

That’s all we need to code for our back-end server.

Build Frontend Client

First, we need to install Angular CLI to develop our client application in Angular.

So run following command to install Angular CLI on your machine.

$ npm install -g @angular/cli

After installation, create client application by running following command.

$ ng new client

It will create client folder containing Angular application code. So now move into this folder since we have to create few components and shared resources using Angular CLI.

$ cd client

Create Shared Resource

First we create shared folder in the src/app location to hold shared resource like Customer model and API service for our application.

Run following command to create customer model class and add following code in it.

$ ng generate class customer --type=model

export class Customer {
  _id: string;
  first_name: string;
  last_name: string;
  gender: string;
  age: number;
  email: string;}

Now create customer service class by running following command and add following code to make calls to restful API endpoints to perform CRUD operations.

$ ng generate service customer

customers: Customer[];
  readonly APIUrl = "http://localhost:3000/Customers";
  constructor(private http: HttpClient) {}
  PostCustomer(cust: Customer) {
    return this.http.post(this.APIUrl, cust); }
  GetCustomerList() {
    return this.http.get(this.APIUrl); }
  GetCustomerById(id: string) {
    return this.http.get(this.APIUrl + `/${id}`); }
  PutCustomer(cust: Customer) {
    return this.http.put(this.APIUrl + `/${cust._id}`, cust); }
  DeleteCustomer(custid: string) {
    return this.http.delete(this.APIUrl + `/${custid}`); }

Create Components and Routing

Now we need to create following components to design our client’s UI.

home – it will be the main UI component and will contain navbar and list-customer component.

navbar – it will show navigation bar containing application title “Customer Store” and “Add New Customer” button that will route to create-customer component.

list-customer – it will show list of customers with delete and edit button for each customer.

create-customer – it will show customer entry form.

edit-customer – it will show customer form to edit the customer details.

Run following commands to create these components.

$ ng generate component home

$ ng generate component navbar

$ ng generate component list-customer

$ ng generate component create-customer

$ ng generate component edit-customer

We also need to create routing module to setup routing among home, create customer and edit customer components.

So run following command to create routing module.

$ ng generate module routing

Add Code to Components and Routing Module

Open routing.module.ts file and add following routing code in it.

const routes: Routes = [
  { path: "", component: HomeComponent },
  { path: "new", component: CreateCustomerComponent },
  { path: "edit/:id", component: EditCustomerComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

Add following mark-up code in the html file of home component to render navbar and list-customer components.

<div class="table-wrapper">
    <app-navbar></app-navbar>
    <app-list-customer></app-list-customer> </div></div>

Go to navbar component and add following mark-up in the html file to create router link to create-customer component.

<div class="table-title">
  <div class="row">
    <div class="col-sm-6">
      <h2>Customer <b>Store</b></h2>
    </div> <div class="col-sm-6">
      <a [routerLink]="['new']" class="btn btn-success" 
data-toggle="modal">
<i class="material-icons">&#xE147;</i> 
<span>Add New Customer</span>
</a> </div> </div></div>

Open list-customer component and add following mark-up in the html file and code in the typescript file to render details of the customers and also delete and edit buttons.

<div [hidden]="this.customers.length !== 0"
  class="alert alert-success" role="alert">
  There are no customers. Please
  <a [routerLink]="['new']" class="alert-link">add new customer</a> 
in the store.</div>
<table [hidden]="this.customers.length == 0"
  class="table table-striped table-hover w-auto">
  <thead><tr><th>First Name</th>
      <th>Last Name</th>
      <th>Gender</th>
      <th>Age</th>
      <th>Email</th>
      <th>Actions</th></tr></thead>
  <tbody id="customers">
    <tr *ngFor="let customer of customers">
      <td>{{ customer.first_name }}</td>
      <td>{{ customer.last_name }}</td>
      <td>{{ customer.gender }}</td>
      <td>{{ customer.age }}</td>
      <td>{{ customer.email }}</td>
      <td><a [routerLink]="['edit', customer._id]" class="edit"
          data-toggle="modal">
<i class="material-icons" data-toggle="tooltip" title="Edit">
&#xE254;</i></a>
        <a href="#deleteCustomerModal"
          (click)="displayDeleteForm(customer._id)"
          class="delete" data-toggle="modal">
<i class="material-icons" data-toggle="tooltip"
 title="Delete">&#xE872;</i></a> </td> </tr>
  </tbody></table>
<div [hidden]="this.customers.length == 0" class="clearfix">
  <div id="counter" class="hint-text">{{ counter }}</div></div>
<!-- Delete Modal HTML -->
<div id="deleteCustomerModal" class="modal fade">
  <input type="hidden" id="delete-id" />
  <div class="modal-dialog">
    <div class="modal-content">
      <form>
        <div class="modal-header">
          <h4 class="modal-title">Delete Customer</h4>
          <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">&times; </button> </div>
        <div class="modal-body">
          <p>Are you sure you want to delete this Customer?</p>
          <p class="text-warning">
            <small>This action cannot be undone.</small>
          </p> </div>
        <div class="modal-footer">
          <input type="button" class="btn btn-default"
          data-dismiss="modal" value="Cancel"/>
          <input type="submit" class="btn btn-danger"  
    data-dismiss="modal" (click)="deleteCustomer()"
 value="Delete"/>
        </div> </form></div> </div></div>

deletedCustomerId: string;
  counter: string;
  customers: Customer[];
  constructor(private customerService: CustomerService) {
    this.customers = []; }
  ngOnInit() { this.GetCustomersFromService(); }
  GetCustomersFromService() {
    this.customerService.GetCustomerList().subscribe(resp => {
      this.customers = resp as Customer[];
      this.counter = `Showing ${this.customers.length} Customers...`;
    }); }
  deleteCustomer() {
    this.customerService
      .DeleteCustomer(this.deletedCustomerId)
      .subscribe(resp => {
        this.GetCustomersFromService();
      }); }
  displayDeleteForm(custid) {this.deletedCustomerId = custid;}

Add following mark-up and code in the html and typescript files of the create-customer component to render customer data entry form and functionality to make API call to save it in the database.

<div class="container">
  <div class="table-wrapper">
    <div class="table-title">
      <div class="row">
        <div class="col-sm-6">
          <h2>Customer <b>Store</b></h2> </div>
        <div class="col-sm-6"></div> </div> </div>
    <!-- Add Modal HTML -->
    <div id="addCustomerModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <form name="addCustForm" #addCustomerForm="ngForm">
            <div class="modal-header">
              <h4 class="modal-title">Add Customer</h4> </div>
            <div class="modal-body">
              <div class="form-group">
              <label>First Name</label>
              <input type="text" name="first_name" #first_name="ngModel"
                  [(ngModel)]="customerDetail.first_name"
                  placeholder="Enter First Name" class="form-control"
                  required /> </div>
              <div class="form-group">
              <label>Last Name</label>
              <input type="text" name="last_name" #last_name="ngModel"
                  [(ngModel)]="customerDetail.last_name"
                  placeholder="Enter Last Name"
                  class="form-control" required /> </div>
              <div class="form-group">
                <label>Gender</label>
                <input type="text" name="gender" #gender="ngModel"
                  [(ngModel)]="customerDetail.gender"
                  placeholder="Enter Gender" class="form-control"
                  required /> </div>
              <div class="form-group">
                <label>Age</label>
                <input type="text" name="age" #age="ngModel"
                  [(ngModel)]="customerDetail.age"
                  placeholder="Enter Age" class="form-control"
                  required/> </div>
              <div class="form-group">
                <label>Email</label>
                <input type="text" name="email" #email="ngModel"
                  [(ngModel)]="customerDetail.email"
                  placeholder="Enter Email" class="form-control"
                  required/> </div> </div>
            <div class="modal-footer">
              <input type="button" (click)="backToHome()"
              class="btn btn-default" value="Cancel" />
              <input type="submit" class="btn btn-success"
                [disabled]="!addCustomerForm.valid"
                (click)="addCustomer(addCustomerForm)"
                value="Add" /></div>
          </form></div></div></div> </div></div>

customerDetail: Customer;
  constructor( private customerService: CustomerService,
    private router: Router ) {
    this.customerDetail = {
      _id: "",
      first_name: "",
      last_name: "",
      gender: "",
      age: null,
      email: ""
    }; }
  addCustomer(addCustomerForm) {
    this.customerService.PostCustomer(addCustomerForm.value)
    .subscribe(resp => {
      this.router.navigate([""]);
    }); }
  backToHome() { this.router.navigate([""]); }

Now go to edit-customer component and add following mark-up and code in the html and typescript files to render customer edit form and load selected customer data into it and make API call to update the data back in the database.

<div class="container">
  <div class="table-wrapper">
    <div class="table-title">
      <div class="row">
        <div class="col-sm-6">
          <h2>Customer <b>Store</b></h2> </div>
        <div class="col-sm-6"></div> </div></div>
    <!-- Edit Modal HTML -->
    <div id="updateCustomerModal">
      <div class="modal-dialog">
        <div class="modal-content">
        <form name="updateCustomerForm" #updateCustomerForm="ngForm">
            <div class="modal-header">
              <h4 class="modal-title">Edit Customer</h4> </div>
            <div class="modal-body">
              <input type="hidden"
                name="_id" #_id="ngModel" 
                [(ngModel)]="customerDetail._id"/>
              <div class="form-group">
              <label>First Name</label>
              <input type="text" name="first_name" #first_name="ngModel"
                  [(ngModel)]="customerDetail.first_name"
                  placeholder="Enter First Name" class="form-control"
                  required /></div>
              <div class="form-group">
              <label>Last Name</label>
              <input type="text" name="last_name" #last_name="ngModel"
                  [(ngModel)]="customerDetail.last_name"
                  placeholder="Enter Last Name" class="form-control"
                  required /> </div>
              <div class="form-group">
                <label>Gender</label>
                <input type="text" name="gender" #gender="ngModel"
                  [(ngModel)]="customerDetail.gender"
                  placeholder="Enter Gender" class="form-control"
                  required /> </div>
              <div class="form-group">
                <label>Age</label>
                <input type="text" name="age" #age="ngModel"
                  [(ngModel)]="customerDetail.age"
                  placeholder="Enter Age" class="form-control"
                  required /> </div>
              <div class="form-group">
                <label>Email</label>
                <input type="text" name="email" #email="ngModel"
                  [(ngModel)]="customerDetail.email"
                  placeholder="Enter Email" class="form-control"
                  required /> </div> </div>
            <div class="modal-footer">
              <input type="button" (click)="backToHome()"
                class="btn btn-default" value="Cancel" />
              <input type="submit" class="btn btn-info"
                [disabled]="!updateCustomerForm.valid"
                (click)="updateCustomer(updateCustomerForm)"
                value="Save"/></div>
          </form></div> </div> </div></div></div>

customerDetail: Customer;
  constructor(
    private customerService: CustomerService,
    private route: ActivatedRoute,
    private router: Router
  ) {
    this.customerDetail = {
      _id: "",
      first_name: "",
      last_name: "",
      gender: "",
      age: null,
      email: "" }; }

  ngOnInit() {this.GetCustomerFromService
(this.route.snapshot.paramMap.get("id"));}

  updateCustomer(updateCustomerForm) {
    this.customerService
      .PutCustomer(updateCustomerForm.value)
      .subscribe(resp => {
        this.router.navigate([""]);
      }); }
  GetCustomerFromService(custid) {
    this.customerService.GetCustomerById(custid)
.subscribe(resp => {this.customerDetail = resp as Customer;
    }); }
  backToHome() { this.router.navigate([""]); }

Open app component html file, delete all existing mark-up code and replace it with following mark-up that will make all the routed component to be rendered in the app component.

<router-outlet></router-outlet>

Last, open the index.html file and add following CSS links and scripts tag to apply bootstraps classes and functionality.

<link rel="stylesheet"
 href="https://fonts.googleapis.com/css?
family=Roboto|Varela+Round"/>
    <link rel="stylesheet"
      href="https://fonts.googleapis.com/icon?
family=Material+Icons"/>
    <link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/
font-awesome/4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/
ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.7/js/bootstrap.min.js"></script>

Now we are done with the coding so let’s run our mean stack application.

Run Server and Client Applications

To run the server we need to move to mean-stack folder and run following command in the command window.

$ Node server.js

It will launch the web server that will host our API available at http://localhost:3000/Customers.

And to run the Angular client application open another command window and move into client folder and run following command.

$ ng serve --open

It will open the CustomerStore client application in the browser at http://localhost:4200 URL like the image below.

Hope you would have got fair amount of idea about developing mean stack application through this article…check out my article on building restful API as well.

You can get the source code of this application from my mean-stack-application GitHub repository.

The post Build Mean Stack Application appeared first on Sanjay Saini’s Tech World.

Build Restful API with Nodejs Express MongoDB

Sanjay Saini — Mon, 20 Jan 2020 06:59:04 +0000

In this article I will share how to build Restful API with Nodejs Express MongoDB that will expose endpoints to the basic CRUD operations. This restful API can be consumed by any frontend application developed in any web dev technologies.

I will write another article on developing frontend application and consume this restful API in that app.

Let’s see what we need to build this Restful API.

Prerequisite

In order to develop and run this restful API, we need Node.js, which is JavaScript runtime installed on our machine. With Node.js comes NPM which is a node package manager that we will use to install other packages like Express needed to develop this API. So download and install the latest Node.js available from this link.
We need code editor as well, I will recommend VS Code but if you already have any other code editor that you are using to write C# code then stick with that otherwise download and install VS Code from this link.
We need Postman which is a famous API Client tool used in testing web API by sending web requests and inspecting response from the API. So download and install Postman for free from this link.
Last, we need to have MongoDB installed on the machine. You can download and install MongoDB community edition free from this link.

MongoDB Installation/Setup

MongoDb is a no-SQL database that stores data in the form of JSON object which is called Document. All Documents are stored in the container called Collection. So first Collection is created and then Document in inserted into it. Download and run the installer, select Custom option and follow the wizard instructions and keep the default setting as is. It will create data folder at C:\Program Files\MongoDB\Server\4.2\data to store databases and also start MongoDB Server as window service after installation is finished. That’s all we need to do on MondoDB side for this API.

Now that we have setup our dev environment and installed all the required software we are ready to start and build restful API with Nodejs Express MongoDB.

Get Started…

Start with creating project folder webapi that will contain code for our restful API and move into it.

$ mkdir webapi

$ cd webapi

Now we will start with creating package.json file which is the first building block for Node.js application and holds application configuration and package dependencies details that is required in order to run the application.

So open the command window in the project folder and run following command to create it.

$ npm init --yes

Install Express, Mongoose and body-parser

Express is a minimal and flexible Node.js web application framework which is developed on top of Http module of Node.js that provides a robust set of features and myriad of HTTP utility methods and middleware to create a robust web API.

Mongoose is a MondoDB object data modelling package that provides a straight-forward, schema-based solution to model data in the Node.js application. It includes built-in type casting, validation, query building, business logic hooks and more, out of the box.

body-paser is Node.js middleware for parsing incoming request bodies in a middleware before request handlers and is available under the req.body property.

So install all these packages by running following command in the command window.

$ npm i express mongoose body-parser –save

–save option will add entry for these packages in the dependencies section in package.json file for our project.

Write Code…

Now open the code editor to start writing code. Run following command to start VS Code editor in the project folder.

$ vscode .

Create db.js file and add following code to create and export connection with MongoDB using mongoose.

const mongoose = require("mongoose");
mongoose.connect(
  "mongodb://localhost:27017/customerDb",
  { useNewUrlParser: true, useUnifiedTopology: true },
  err => {
    if (!err) console.log("Successfully connect to MondoDB...");
    else
      console.log(
        "Connection to MongoDb failed :" + JSON
         .stringify(err, undefined, 2)
      );
  }
);

module.exports = mongoose;

Create index.js file and add following code to create Express server to host our restful API. It will also import mongodb connection from db.js.

const bodyParser = require("body-parser");
const { mongoose } = require("./db");
const customer = require("./Controller/CustomerController");

const express = require("express");
const app = express();

//added middleware code
app.use(bodyParser.json());
app.use("/customers", customer);

const port = process.env.port || 3000;
app.listen(port, () => {
  console.log(`server listening at port :${port}`);
});

Now we need to create object data model to store Customer data in the MongoDB database. So create Models folder and create Customer.js file in it. Add following code to hold Customer model schema and export it as well.

const mongoose = require("mongoose");

var Customer = mongoose.model("Customer", {
  first_name: String,
  last_name: String,
  gender: String,
  age: Number,
  email: String
});

module.exports = { Customer };

The last piece of code is to add controller code that will expose our restful API endpoints. So create Controller folder and in it create CustomerController.js file.

Now add following code for CRUD operations.

Add following code to handle GET request to fetch the Customers.

router.get("/", (req, resp) => {
  Customer.find((err, docs) => {
    if (err)
      console.log(
        "Error while getting customers..." + JSON
         .stringify(err, undefined, 2)
      );
    else resp.send(docs);
  });
});

To create new Customer, add following code to handle POST request from the client.

router.post("/", (req, resp) => {
  let cust = new Customer({
    first_name: req.body.first_name,
    last_name: req.body.last_name,
    gender: req.body.gender,
    age: req.body.age,
    email: req.body.email
  });
  cust.save((err, doc) => {
    if (err)
      console.log(
        "error in saving customers..." + JSON
         .stringify(err, undefined, 2)
      );
    else resp.send(doc);
  });
});

Add following code to handle PUT request from client to update existing Customer.

router.put("/:id", (req, resp) => {
  let customerId = req.params.id;
  if (!ObjectId.isValid(customerId))
    return resp.status(400)
               .send(`Customer not found for id :${customerId}`);

And to handle DELETE request to delete the Customer, Add following code.

router.delete("/:id", (req, resp) => {
  let customerId = req.params.id;
  if (!ObjectId.isValid(customerId))
    return resp.status(400)
               .send(`Customer not found for id :${customerId}`);

  Customer.deleteOne({ _id: customerId }, (err, docs) => {
    if (err)
      console.log(
        "Error while deleting customers..." + JSON
         .stringify(err, undefined, 2)
      );
    else resp.send(docs);
  });
});

That’s all we need to code for now…

Launch the API

Now run following command to host our restful API.

$ node index.js

It will launch the web server that will host our API available at http://localhost:3000/Customers

Test the API

Now open the Postman Web API Client application and click on the Create a request to initiate an API request to our restful API.

Take following steps to test POST request handler to create the Customer.

Select POST HTTP verb from the drop down.
Enter request URL http://localhost:3000/Customers for post request.
Select Body tab and then select raw radio button and finally select type JSON from the drop down.
In the request body enter following JSON object representing our Customer resource that we want to create.

{
  "first_name" : "Amit",
  "last_name" : "Patil",
  "gender" : "Male",
  "age" : 39,
  "email" : "Amit@gmail.com"
}

You can test rest of the CRUD operations by following my article where I have tested another web api using PostMan. Although web api is different but steps to test any we api are same with PostMan.

Hope you have enjoyed it…check out my other articles.

The post Build Restful API with Nodejs Express MongoDB appeared first on Sanjay Saini’s Tech World.

Create JavaScript Frontend for Web API CRUD operations.

Sanjay Saini — Sat, 11 Jan 2020 11:25:46 +0000

In this article I will show how to create JavaScript Frontend for Web API CRUD operations using Bootstrap and some simple javascript code as shown in the below image.

JavaScript Frontend for BookStore Web API CRUD operations

Some time back I had written BookStore Web API in ASP.Net Core that perform simple CRUD operations using Entity Framework Core and uses SQL Server Express edition as back-end for data storage and retrieval.

Check out my article on creating this BookStore Web API for which I will be sharing how to create javascript frontend in this article.

Prerequisites

In order to run the BookStore Web API you will need .Net Core SDK that includes .Net CLI tools, .Net Core Runtime. So download and install the latest version of .Net Core SDK available from this link.
We will also need code editor, I will recommend VS Code but if you already have any other code editor that you are using to write C# code then stick with that otherwise download and install VS Code from this link. After installing SDK and VS Code, open the command prompt and run following command to check if SDK installed properly.

$ dotnet –version

You must get the latest version number as a result. For me its 3.1.

And last, we need to have SQL Server installed on the machine. In case you already have Visual Studio 2015 or later installed then SQL Server Express edition will already be installed along with the Visual Studio. Otherwise download and install latest SQL Server Express edition free from this link.

After done with the environment setup we are ready to create JavaScript Frontend for our BookStore Web API CRUD operations.

Get Started…

Here we need few things before we actually start writing some html/javascript code to develop the frontend.

First, we need BookStore Web API code on top of which we will develop frontend.
Second, we need to create scaffolding to contain frontend code.
Finally, get some readymade html/css/javascript code for frontend by using Bootstrap template for Data table and Modal Forms. So let’s get started…

Get Source code

Get the source code of BookStore Web API from my GitHub repository link by downloading the ZIP file from “Clone and download” button and unzip it in the folder on your machine.
Follow the instructions in the README.md file to setup the code for further development.
Open the command window in the folder where you unzipped the source code and start VS Code editor by running following command in the command window.

$ vscode .

Before we begin developing frontend we need to make few minor changes in our Web API code application in order to make it work like a website.
- First, we need to force the application to open the index.html instead of Web API so open the Properties\launchSettings.json file and remove the launchUrl property.
- Second, we want to make sure our application serves static files (html/css/javascript) to the web client and also serve the default file (in our case index.html) when site loads into browser. So add following code in the Configure method of Startup.cs.

app.UseDefaultFiles();
app.UseStaticFiles();

Create JavaScript Frontend

We will start with creating scaffolding for our frontend. So create following file/folder structure that will contain all our frontend code.
- Create wwwroot folder at the root folder of the application.
- Create index.html file in the wwwroot folder.
- Create js folder in the wwwroot folder.
- Create site.js folder in the js folder.
- Create css folder in the wwwroot folder.
- Create site.css folder in the css folder.

We will not write all the html/CSS code for our frontend instead we will get some readymade html/CSS code for showing Data Table with Modal Form for CRUD operations by using Bootstrap template for Data Table with Modal Form. So to get the Bootstrap template, open this link and click on view code and copy the source code in the index.html file.
Remove all “checkbox” elements and pagination related code from the index.html since we just want to focus on CRUD operations related UI right now.
Cut out all the CSS code between <style type="text/css"> tag from the index.html file and paste it in the site.css file. And add following code in the <head> section of index.html.

<link rel="stylesheet" href="css/site.css" />

Although we could keep the CSS code in the index.html file but as a best practice we should always keep all style related code in the separate folder.

Code change for Web API CRUD Operations

Now we will make html/javascript code changes to integrate Web API CRUD operations like getting/showing the data, creating, updating and deleting the data resource through frontend.

Code change for getting data and showing it on the data table in UI.

Remove all code between <table class="table table-striped table-hover w-auto"> tag and replace it with following code in the index.html file.

<thead>
            <tr>
              <th>Title</th>
              <th>Author</th>
              <th>Publisher</th>
              <th>Genre</th>
              <th>Price</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody id="books"></tbody>

Add following code under <div class="clearfix"> to show the number of records.

<div id="counter" class="hint-text"></div>

Also add following javascript tag just above the </body> tag in the index.html file.

<script src="js/site.js" asp-append-version="true"></script>
  <script type="text/javascript">
 getBookItems();
</script>

Add following javascript code in the site.js file that will make the Web API GET call to fetch the data from database and display it on the UI.

const uri = "api/BookItems";
let books = [];

function getBookItems() {
  fetch(uri)
    .then(response => response.json())
    .then(data => _displayItems(data))
    .catch(error => console.error("Unable to get books.", error));
}

function displayDeleteForm(id) {
  const item = books.find(item => item.id === id);
  document.getElementById("delete-id").value = item.id;
}

function displayEditForm(id) {
  const item = books.find(item => item.id === id);
  document.getElementById("edit-id").value = item.id;
  document.getElementById("edit-title").value = item.title;
  document.getElementById("edit-author").value = item.author;
  document.getElementById("edit-publisher").value = item.publisher;
  document.getElementById("edit-genre").value = item.genre;
  document.getElementById("edit-price").value = item.price;
}

function _displayCount(itemCount) {
  const name = itemCount === 1 ? "entry" : "entries";
  document.getElementById(
    "counter"
  ).innerHTML = `Showing <b>${itemCount}</b> ${name}`;
}

function _displayItems(data) {
  const tBody = document.getElementById("books");
  tBody.innerHTML = "";
  _displayCount(data.length);
  const button = document.createElement("button");

  data.forEach(item => {
    let editButton = document.createElement("a");
    editButton.href = "#editBookModal";
    editButton.className = "edit";
    editButton.setAttribute("onclick", `displayEditForm(${item.id})`);
    editButton.setAttribute("data-toggle", "modal");
    editButton.innerHTML =
      "<i class='material-icons' data-toggle='tooltip' title='Edit'>&#xE254;</i>";

    let deleteButton = document.createElement("a");
    deleteButton.href = "#deleteBookModal";
    deleteButton.className = "delete";
    deleteButton.setAttribute("onclick", `displayDeleteForm(${item.id})`);
    deleteButton.setAttribute("data-toggle", "modal");
    deleteButton.innerHTML =
      "<i class='material-icons' data-toggle='tooltip' title='Delete'>&#xE872;</i>";

    let tr = tBody.insertRow();

    let td1 = tr.insertCell(0);
    let textTitle = document.createTextNode(item.title);

    td1.appendChild(textTitle);

    let td2 = tr.insertCell(1);
    let textAuthor = document.createTextNode(item.author);
    td2.appendChild(textAuthor);

    let td3 = tr.insertCell(2);
    let textPublisher = document.createTextNode(item.publisher);
    td3.appendChild(textPublisher);

    let td4 = tr.insertCell(3);
    let textGenre = document.createTextNode(item.genre);
    td4.appendChild(textGenre);

    let td5 = tr.insertCell(4);
    let textPrice = document.createTextNode(item.price);
    td5.appendChild(textPrice);

    let td6 = tr.insertCell(5);
    td6.appendChild(editButton);
    td6.appendChild(deleteButton);
  });

  books = data;
}

Code change for Add Book Model form and creating/saving the data.

Replace code in the <div class="col-sm-6"> tag with the following code to show “Add New Book” modal form.

<a
                href="#addBookModal"
                class="btn btn-success"
                data-toggle="modal"
                ><i class="material-icons">&#xE147;</i>
                <span>Add New Book</span></a
              >

Replace the top level div id with “addBookModal” under the <!– Add Modal HTML –> section that contains html code for Add Modal Form.
Replace <form> tag with following code.

<form action="javascript:void(0);" method="POST" onsubmit="addBookItem()">

Also edit the existing <label> to show Title, Author, Publisher, Genre and Price.
And edit <input> tags with following <input> tags so the end result should look like the form below.

<input type="text" id="add-title" placeholder="Enter Book Title"
class="form-control" required />
<input type="text" id="add-author" placeholder="Enter Book Author"
class="form-control" required />
<input type="text" id="add-publisher" placeholder="Enter Book Publisher"
class="form-control" required />
<input type="text" id="add-genre" placeholder="Enter Book Genre"
class="form-control" required />
<input type="text" id="add-price" placeholder="Enter Book Price"
class="form-control" required />

Add following javascript code in the site.js that will make Web API POST call to save/create the data.

function addBookItem() {
  const titleInputText = document.getElementById("add-title");
  const auhtorInputText = document.getElementById("add-author");
  const publisherInputText = document.getElementById("add-publisher");
  const genreInputText = document.getElementById("add-genre");
  const priceInputText = document.getElementById("add-price");

  const item = {
    title: titleInputText.value.trim(),
    author: auhtorInputText.value.trim(),
    publisher: publisherInputText.value.trim(),
    genre: genreInputText.value.trim(),
    price: parseInt(priceInputText.value.trim())
  };
  console.log(JSON.stringify(item));
  fetch(uri, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(item)
  })
    .then(response => response.json())
    .then(() => {
      getBookItems();
      titleInputText.value = "";
      auhtorInputText.value = "";
      publisherInputText.value = "";
      genreInputText.value = "";
      priceInputText.value = "";
    })
    .catch(error => console.error("Unable to add Book.", error));
}

Code change for Edit Book Model form and updating the data.

Under the <!– Edit Modal HTML –> section that contains html code for Edit Modal Form, replace the top level div id with “editBookModal”.
Replace <form> tag with following code.

<form action="javascript:void(0);" onsubmit="updateBookItem()">

Also edit the existing <label> to show Title, Author, Publisher, Genre and Price.
And edit <input> tags the same way we did for “Add Book” form with the <input> tags code we used there but make sure the id value of input tags should be prefixed with edit instead of add this time so the end result should look like the form below.

Add following javascript code in the site.js that will make Web API PUT call to update the data.

function updateBookItem() {
  const itemId = document.getElementById("edit-id").value.trim();
  const item = {
    id: parseInt(itemId, 10),
    title: document.getElementById("edit-title").value.trim(),
    author: document.getElementById("edit-author").value.trim(),
    publisher: document.getElementById("edit-publisher").value.trim(),
    genre: document.getElementById("edit-genre").value.trim(),
    price: parseInt(document.getElementById("edit-price").value.trim())
  };

  fetch(`${uri}/${itemId}`, {
    method: "PUT",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(item)
  })
    .then(() => getBookItems())
    .catch(error => console.error("Unable to update item.", error));

  return false;
}

Code change for Delete Book Model form and deleting the data.

Finally, under the <!– Delete Modal HTML –> section that contains html code for Delete Modal Form, replace the top level div id with “deleteBookModal”.
And replace <form> tag with following code.

<form action="javascript:void(0);" onsubmit="deleteBookItem()">

Also change the text under H4 tag that will appear as form title for all the forms accordingly.

Add following javascript code in the site.js that will make Web API DELETE call to delete the data.

function deleteBookItem() {
  const itemId = document.getElementById("delete-id").value.trim();
  fetch(`${uri}/${itemId}`, {
    method: "DELETE"
  })
    .then(() => getBookItems())
    .catch(error => console.error("Unable to delete Book.", error));
}

Finally add following jqury code under <script type="text/javascript"> tag in the index.html file to force the Modal Forms to close when we submit them.

$("#addBookModal").submit(function() {
        $("#addBookModal").modal("hide");
      });

      $("#editBookModal").submit(function() {
        $("#editBookModal").modal("hide");
      });

      $("#deleteBookModal").submit(function() {
        $("#deleteBookModal").modal("hide");
      });

I have covered all major code changes in this article to implement the CRUD operations however if I missed any cosmetic changes like label text etc. then try to fix them yourself.

You can get the complete source code of what we have developed here from this link of my GitHub repository.

Keep learning and…subscribe to my blog if you liked this article.

Create ASP.Net Core 3 Web API Using Entity Framework Core

Sanjay Saini — Thu, 02 Jan 2020 09:43:47 +0000

In this article (originally published at sanjaysaini.tech) I will be sharing how we can create ASP.Net Core 3 Web API using Entity Framework Core edition which is basically an open source and cross-platform version of the Entity Framework to be used in the .Net Core application development.
This Web API will perform simple CRUD operations using Entity Framework Core and will use SQL Server Express edition as backend for data storage and retrieval.

Prerequisites

In order to develop and run .Net Core app, we need .Net Core SDK that includes .Net CLI tools, .Net Core Runtime. So download and install the latest version of .Net Core SDK available from this link.
We will also need code editor, I will recommend VS Code but if you already have any other code editor that you are using to write C# code then stick with that otherwise download and install VS Code from this link. After installing SDK and VS Code, open the command prompt and run following command to check if SDK installed properly.

$ dotnet –version
You must get the latest version number as a result.

To test this web API’s CRUD operations, we need to install Postman which a famous API Client tool used in testing web API by sending web requests and inspecting response from the API. So download and install Postman for free from this link.
And last, we need to have SQL Server installed on the machine. In case you already have Visual Studio 2015 or later installed then SQL Server Express edition will already be installed along with the Visual Studio. Otherwise download and install latest SQL Server Express edition free from this link. After done with the environment setup we are ready to create ASP.Net Core 3 Web API using Entity Framework Core which will provide CRUD operations.

Create a new project

For the purpose of this article I am creating a BookStore Web API that will provide CRUD operation on web requests (Post, Get, Put and Delete) for Book data Model.
So now go to the folder location where you want to create Web API project and open the command window.
Create webapi type project for our CRUD Web API by running following command.

$ dotnet new webapi -o BookStoreApi

It will create BookStoreApi folder with the same name project file in it.

Now we need to work under this folder so move into this folder.

$ cd BookStoreApi

Our Web API will listening at HTTPS so we need to create and trust the development certificate so that web API hosts securely on local development server when we run the project.

So run following command and click on the yes button on the Security Warning dialog window.

dotnet dev-certs https --trust

Add Entity Framework Core Package Reference

First we need to install Entity Framework Core and for that we need to install the package for the EF Core database provider that we want to target. This Web API will use SQL Server so run following command to install the Entity Framework Core.

$ dotnet add package Microsoft.EntityFrameworkCore.SqlServer

You find following entry in the app project file after successful installation.

<ItemGroup> <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="3.1.0" /> </ItemGroup>

Check out my article on creating CRUD application using Entity Framework Core 3 as well.

As we are done with our Web API project setup, now open VS code in the project folder to write some code.

Run following command in the command window to open the VS Code.

$ code .

Create the model

Model represents the set of classes that an application uses to manage the data.
Our model will have a POCO class to manage data for our Book Store API.
We should keep all our model classes in the Models folders so let’s create Models folder and create BookItem.cs class in it that will represent Book entities in our model.

    public class BookItem
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Author { get; set; }
        public string Publisher { get; set; }
        public string Genre { get; set; }   
        public int Price { get; set; }
    }

Also create** BookStoreDbContext.cs** class derived from DbContext that represents session with the database in the Models folder. This class object will be used to perform CRUD operations on the database and its properties will represent table in the database.

using Microsoft.EntityFrameworkCore;

public class BookStoreDbContext: DbContext
{
     public BookStoreDbContext (DbContextOptions< BookStoreDbContext > options) : base(options)
     { }

    public DbSet< BookItem> BookItems { get; set; }

}

Register Database Context

We have to register our BookStoreDbContext with the Dependency Injection container that provides services to API controllers.
And also need to configure the database connection that will be used by the Entity Framework Migrations to sync that database with the data model in the application.
So add following code in the ConfigureServices method of Startup.cs class to pass the database connection while adding the DbContext service to the container.

services.AddDbContext< BookStoreDbContext >(opt => opt
 .UseSqlServer(@"Server=(localdb)\mssqllocaldb;Database=BookStoreApiDb;Trusted_Connection=True;"));

Also add following references in the Startup.cs

using Microsoft.EntityFrameworkCore;
using BookStoreApi.Models;

Entity Framework Migrations

Entity Framework provides a way to create a database from the data model using Migrations. Migrations are used to keen database in sync with the changes in the application’s data model by updating the database schema while preserving existing data in the database.

So in order to create migrations we need to install Entity Framework Core tools that includes dotnet ef tool and the Entity Framework designer.

Run following command in the command window to install the Entity Framework Core tools.

$ dotnet tool install --global dotnet-ef

if you have already installed the Entity Framework Core tools then don’t install it again.

Now run following command to add Entity Framework designer package to the project.

$ dotnet add package Microsoft.EntityFrameworkCore.Design

It will add following entry in the application project file.

<PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="3.1.0"> <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets> <PrivateAssets>all</PrivateAssets> </PackageReference>

Create the database

Since we have installed Entity Framework Core tools, we are ready to create database from our application data model.
First, we need to add migrations that will create the database schema of our model entities.
So run following command to create the first migration.

$ dotnet ef migrations add InitialCreate

It will add Migrations folder in the project with auto-generated files for InitialCreate migration.

Second, we need to apply InitialCreate migration on the database. Since it’s a very first migration and we don’t have existing database so it will create new database for us.

So run following command to apply the migration to the database.

$ dotnet ef database update

A new database BookStoreApiDb is created along with the table BookItems for the Model entity.

Add API Controller

Unlike Visual Studio that has template to generate boiler plate code for Web API controller, VS Code editor doesn’t provide any template.
So we need to install aspnet code generator tool to add API controller in our application.

Run following command in the command window to install the aspnet code generator tool.

$ dotnet tool install --global dotnet-aspnet-codegenerator

Also add code generation design package in the project by running following command.

$ dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design

It will add following entry in the application project file.

<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.1.0" />

Since we have code generation tool installed, now we can add API controller BookItemsController which will use BookItem Model and BookStoreDbContext database context.

So run following command to generate the API controller.

$ dotnet aspnet-codegenerator controller -name BookItemsController -async -api -m BookItem -dc BookStoreDbContext -outDir Controllers

Above command will create BookItemsController.cs controller class in the Controllers folder with auto generated CRUD operation code (action methods) for following HTTP verbs.

HttpGet – to get the web resources/data
HttpPost – to create web resource/save data
HttpPut – to update web resource/data
HttpDelete – to delete web resource/data

Test CRUD Operations with Postman

After completing the initial development of our web API, we are ready to test it.
So run the following command to start up our BookStore web API.

$ dotnet run

It will host Web API locally and it will be listening at https://localhost:5001 URL. However to request web resource to the API we need to append this URL with the specific action method end point and use it with specific Http verb.

For example to get the web resource we need to use following URL with GET HTTP verb in the Web API Client or web browser.

https://localhost:5001/api/BookItems

Now open the Postman Web API Client application and click on the Create a request to initiate an API request to our BookStore web API.

Create Web Resource/Data Operation

Select POST HTTP verb from the drop down.
Enter request URL https://localhost:5001/api/BookItems for post request.
Select Body tab and then select raw radio button and finally select type JSON from the drop down.
In the request body enter following JSON object representing our BookItem resource that we want to create.

{
    "Title":"The Art of War",
    "Author":"Sun Tzu",
    "Publisher":"British Museum",
    "Price": 11
}

We are not passing “id” value since it will be auto generated by the Entity Framework.

Now click on Send button.

Now click on the Header tab and check the status that should be 201 Created which means the post request successfully created the BookItem resource.

Create another BookItem resource the same way using following JSON object in the request body.

{
    "Title":"The Monk Who Sold His Ferrari",
    "Author":"Robin Sharma",
    "Publisher":"Jaico Publishing",
    "Genre":"Fiction",
    "Price": 121
}

Read Web Resource/Data Operation

Select GET HTTP verb from the drop down.
Enter request URL https://localhost:5001/api/BookItems for get request.
Click on the Send button.
Now click on the Header tab and check the response body should be showing the resources we had created.

Update Web Resource/Data Operation

Now we want to update the first BookItem resource that we created because we forgot to pass Genre value when we created it so now we will update it with the Genre value.

Select PUT HTTP verb from the drop down.
Enter request URL https://localhost:5001/api/BookItems/1 for put request for first BookItem resource (id=1).
Select Body tab and then select raw radio button and finally select type JSON from the dropdown.
In the request body enter following JSON object representing the first BookItem resource that we want to update.

{
    "id": 1,    
    "title": "The Art of War",
    "author": "Sun Tzu",
    "publisher": "British Museum",
    "genre": "History",
    "price": 11
}

this time we are passing “id” value in body as well as in the PUT request URL to specify the resource that we want to update.

Now click on Send button.

Now click on the Header tab and check the status that should be 204 No Content which means the put request successfully updated the BookItem resource.

Delete Web Resource/Data Operation

Now we want to delete second BookItem resource that we created earlier.

Select DELETE HTTP verb from the drop down.
Enter request URL https://localhost:5001/api/BookItems/2 for delete request to delete second BookItem resource (id=2).
Now click on Send button.

Now click on the Header tab and check the status that should be 200 Ok which means the delete request successfully deleted the BookItem resource.

Hope this article would have given you some idea about how you can create your own ASP.Net Core 3 Web API.

You can get the complete source code of BookStoreApi from my GitHub repository aspnet-core3-webapi.

How to deploy Angular app on GitHub Pages?

Sanjay Saini — Sun, 22 Dec 2019 14:30:29 +0000

In this article I am going to share with you my learning while I was trying to publish my Angular app on the GitHub Pages. I found GitHub Pages very effective yet very easy platform to publish your websites. So in this article I am explaining the process the same way I published my app.
I have developed this simple Todo App in Angular which I am going to explain how to deploy on GitHub Pages in these simple steps...

Deploy your local repository on GitHub

GitHub Pages (https://pages.github.com/) provides very convenient way to deploy your static websites from your GitHub repository therefore you need to have an account on the GitHub.com in order to follow this article.

First you need to put your code in local repository into the remote repository at github.com so if you don’t have GitHub account you need to create it first now.

Now login to your GitHub account and create repository in which you will upload your local code. Here I created repository named todo-app.

Note down the URL of newly created repository that will be used to setup remote repository for your local repository in order to push your local repository code onto GitHub repository.

Assuming you have git installed on your machine and you have already committed your code in the master branch of your local repository.

Open the git bash on the app folder and run below commands with your GitHub repository URL to upload your code on github.com repository.

$ git remote add origin <your GitHub repository URL>
$ git push -u origin master

Refresh your GitHub repository and check your code is pushed into newly created GitHub repository.

Build your code to generate deployables

Now we need to build our code in production mode in order to create distributable files that will be deployed on GitHub Pages. By default this deployable code generated in the /dist/ folder under the app folder but we need to generate this in the docs folder under the app folder.

So we need to make a small change in the angular.json file and change the outputpath value to docs/.

Another point to be noted is the URL of your going to be hosted app on the Github Pages would be https://username.github.io/respositoryname.

Like in my case it would be https://sanjaysaini2000.github.io/todo-app.

This URL is needed to set the base URL of our website while generating the distributable files to deploy on GitHub Pages.

So now run following command with your website URL in the base-href option in the git bash window to generate distributable files in the docs folder.

$ ng build - -prod –base-href=” https://username.github.io/respository-name/”

username and repository-name will be your github username and repository name.

Go to your app folder and check docs folder is created that contains all the distributable files.

Now commit this folder into local repository and also push it into the GitHub repository as well by running following commands in the git bash window.

$ git add .
$ git commit -m "generated deployables"
$ git push -u origin master

Configure GitHub repository for Publishing on GitHub Pages

Once docs folder is pushed into you GitHub repository you need to open the repository settings and go to the GitHub Pages section and select master branch/docs folder from Source drop-down and that's it....

Now open the GitHub Pages URL of your deployed app in the browser window to check successful deployment of your app on the GitHub Pages.

Here's the Link of this todo-app on GitHub Pages.

I had to create another repository name angular-todo-app so dont get confused with different repository name in the URL of this site.

There is another method to deploy you Angular app only on GitHub Pages using angular-cli-ghpages package that you can google for more details but personally I find this approach better and clear than using that packages.

Happy Reading...!!!

Create CRUD App Using Entity Framework Core 3.0 with SQL Server

Sanjay Saini — Fri, 20 Dec 2019 06:40:09 +0000

In this article I will be sharing how we can simple CRUD app using Entity Framework Core edition which is basically an open source and cross-platform version of the Entity Framework to be used in the .Net Core application development.

With EF Core, data access is performed using a model. A model is made up of entity classes and a context object (derived from DbContext class) that represents a session with the database, allowing you to query and save data in the database.

Here I will be using code first approach without existing database.

Prerequisites

In order to develop and run .Net Core app, we need .Net Core SDK that includes .Net CLI tools, .Net Core Runtime.
So download and install the latest version of .Net Core SDK available from this link.
We will also need code editor, I will recommend VS Code but if you already have any other code editor that you are using to write C# code then stick with that otherwise download and install VS Code from this link.
After installing SDK and VS Code, open the command prompt and run following command to check if SDK installed properly.

$ dotnet --version
You must get the latest version number as a result. In my case its 3.0.101 since I had installed it sometime back.
After done with the environment setup we are ready to develop our CRUD console app.

Create a new project

Now go to the folder location where you want to create app project and open the command window.
Create console type project for our CRUD app by running following command.

$ dotnet new console -o EFCore-CrudApp

It will create EFCore-CrudApp folder with the same name project file in it.
Now we need to work under this folder so move into this folder.

$ cd EFCore-CrudApp

Add Package References

We need to install Entity Framework Core and for that we need to install the package for the EF Core database provider that we want to target. In this app we will be using SQL Server so run following command to install the Entity Framework Core.

$ dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 3.0.0

I have used specific versions compatible with .net core SDK 3.0 but if you have latest version then you should run these command without specifying the version.

You find following entry in the app project file after successful installation.

<ItemGroup> <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="3.0.0" /> </ItemGroup>

As we are done with our app project setup, now open VS code in the project folder to write code for this app.

Create the model

Our model will consists 2 POCO classes and a context class.
Let’s create Model.cs and create following classes to represent Member and Book entities in our Model.

    public class Member
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string PhoneNo { get; set; }
        public string City { get; set; }
    }
    public class Book
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Gener { get; set; }   
    }

Also create CrudAppDbContext class derived from DbContext that represents session with the database. This class object will be used to perform crud operations on the database and its properties will represent table in the database.

public class CrudAppDbContext: DbContext
{
    public DbSet<Member> Members { get; set; }
    public DbSet<Book> Books { get; set; }

}

We also need to configure the database connection that will be used by the EF Migrations to sync that database with the data model in the application.
So add following code in the CrudAppDbContext class to pass the database connection while configuring the database context for this app.

protected override void OnConfiguring(DbContextOptionsBuilder options)
{
   options.UseSqlServer(@"Server=(localdb)\mssqllocaldb;Database=EFCoreCrudAppDb;Trusted_Connection=True;");
}

Entity Framework Migrations

So in order to create migrations we need to install Entity Framework Core tools that includes “dotnet ef” tool and the "EF designer".

Run following command in the command window to install the EF Core tools.

$ dotnet tool install --global dotnet-ef –version 3.0.0 $ dotnet add package Microsoft.EntityFrameworkCore.Design –version 3.0.0

I have used specific versions compatible with .net core SDK 3.0 but if you have latest version then you should run these command without specifying the version.

<PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="3.0.0"> <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets> <PrivateAssets>all</PrivateAssets> </PackageReference>

Create the database

Since we have installed Entity Framework Core tools, we are ready to create database from our application data model.

First, we need to add migrations that will create the database schema of our model entities. So run following commands to create the database.

$ dotnet ef migrations add InitialCreate

It will add Migrations folder in the project with auto-generated files for “initialCreate” migration.

Second, we need to apply “initialCreate” migration on the database. Since it’s a very first migration and we don’t have existing database so it will create new database for us.

So run following command to apply the migration to the database.

$ dotnet ef database update

A new database is created along with the tables for the model entities.

Add CRUD Operations Code

Since the database is created, we are ready to add code for crud operations.

Add new file CrudUtility.cs in the project to add crud operations code.

Add following code to create (insert) data in the Books table in database.

        public static void AddBook()
        {
            using (var dbcontext = new CrudAppDbContext())
            {
                Console.WriteLine("**********Enter Book details**********");
                Console.WriteLine("--------------------------------------");
                Console.Write("Book Title : ");
                string title = Console.ReadLine();
                Console.Write("Book Gener : ");
                string gener = Console.ReadLine();
                Console.WriteLine(" ");

                var book = new Book { Title = title, Gener = gener };
                dbcontext.Books.Add(book);
                dbcontext.SaveChanges();
            }
        }

Add following code to read data from the Books table.

        public static void GetBooks()
        {
            using (var dbcontext = new CrudAppDbContext())
            {
                var query = from b in dbcontext.Books orderby b.Id select b;
                Console.WriteLine("**********List of Books**********");
                Console.WriteLine("---------------------------------");
                foreach (var b in query)
                {
                    Console.WriteLine("Details of Book No - {0}", b.Id);
                    Console.WriteLine("--------------------------------- ");
                    Console.WriteLine("Book Title - {0}", b.Title);
                    Console.WriteLine("Book Gener - {0}", b.Gener);
                    Console.WriteLine(" ");
                }
            }
        }

Add following code to update a particular Book data in the Books table.

     Public static void UpdateBookDetails(int bookId, string title, string gener)
        {
            using (var dbcontext = new CrudAppDbContext())
            {
                var query = from b in dbcontext.Books orderby b.Id select b;
                foreach (var b in query)
                {
                    if (b.Id == bookId)
                    {
                        b.Title = title;
                        b.Gener = gener;
                        dbcontext.Update(b);
                        break;
                    }
                }
                dbcontext.SaveChanges();
            }
        }

Add following code to delete a particular Book data from the Books table.

        public static void DeleteBook(int bookId)
        {
            using (var dbcontext = new CrudAppDbContext())
            {
                var query = from b in dbcontext.Books orderby b.Id select b;
                foreach (var b in query)
                {
                    if (b.Id == bookId)
                    {
                        dbcontext.Remove(b);
                        break;
                    }
                }
                dbcontext.SaveChanges();
            }
        }

Same way add code to perform CRUD operations on “Member” entity as well.

Now we have to call these CRUD operations in our app so add following code in the Main method of Program.cs file.

            CrudUtility.AddBook();
            CrudUtility.GetBooks();

            Console.Write("Enter Book's Id to be deleted : ");
            int deletedBookId = int.Parse(Console.ReadLine());
            CrudUtility.DeleteBook(deletedBookId);

            Console.Write("Enter Book's Id to be updated : ");
            int updatedBookId = int.Parse(Console.ReadLine());
            Console.Write("Enter Book's Title : ");
            string bookTitle = Console.ReadLine();
            Console.Write("Enter Book's Gener : ");
            string bookGener = Console.ReadLine();
            CrudUtility.UpdateBookDetails(updatedBookId, bookTitle, bookGener);

You can get the complete source code from my GitHub repository EFCore-CrudApp with the details about how to setup the code on your machine.

Run the App

At last run the app with following command.

$ dotnet run

Happy reading...

Deploy Your Angular App on Firebase.

Sanjay Saini — Tue, 17 Dec 2019 08:32:11 +0000

Here I am going to share with you how you can deploy your Angular app on Firebase.
In case you don’t know what Firebase is, it’s a mobile and web application development and deployment platform. For more details checkout this link.
I have developed this simple frontend only (No backend) Todo App in Angular which I am going to use to explain how simple it is to deploy your App on Firebase.
If you already have any App ready for deployment you can follow along with me as I am explaining these simple steps in this article.

If you are interested in the source code of this App, you can get it from link of my angular-todo-app GitHub repository.

Create Firebase Account

In order to deploy your app on Firebase you must first need to have an account on the firebase website (https://console.firebase.google.com). The good news is that Firebase expects google account for login and I am sure you already have one otherwise you can create one if you don’t have or you can create another google account for Firebase if you don’t want to use existing one.

Create New Firebase Project

Once you are done with the account creation, now create your first Firebase project by clicking on the Add Project button. It’s a 3 steps process.

First, provide unique name to your project. In my case I have named it angular7-todo-app.
Second, enable google analytics for this project, which is by default enabled so click on continue.
Finally, configure the google analytics by selecting “default account for firebase” from the dropdown field and click on create project. It will take 1-2 minutes to create the project and that’s all you need to do on Firebase site for now in order to deploy this Todo app. Although you can do much more with Firebase but that’s not in scope for this article.

Now we have all the setup needed at the Firebase site done, we are few more steps away from the deployment of our app on Firebase.

Deploy App with Firebase Tool

We will require Firebase tools installed on the machine for the deployment.

Install Firebase Tool

So open the command window and navigate to your app project folder and install firebase-tools on your machine via npm by running following command.

$ npm install –g firebase-tools
Next we need to login to Firebase site from the console using following command.

$ firebase login --interactive
This will open the Firebase login in the browser for you to login.

Initialize Firebase Project

Next we need to initialize Firebase project from our project folder using following command.

$ firebase init
This will start a selection wizard to initialize Firebase project with following steps in the console.

Step-1. Select “Y” to proceed and then select Hosting option since we want to only host our app at this moment.

Step-2. Now select existing project option since we already created Firebase project for this app hosting.

Step-3. So now select the newly created Firebase project which in my case is angular7-todo-app.

Step-4. Select “No” to configure the app as single page app since we will configure it by updating firebase.json file.

In the end, Firebase initialization wizard will create following files in the project folder.

404.html
Index.html
.firebaserc
Firebase.json

Delete this index.html file since you might already have index.html in your app project folder.
Now edit this newly created firebase.json file and add following configuration.

"public": "docs", "rewrites": [ { "source": "**", "destination": "/index.html" } ],

Note – make sure the outputPath value in the angular.json should be “docs”.

Build App Project

Since we are done with initialization of our Firebase project, now we need to create production release build for our app.
So run the following command on the command window to generate build files in the “docs” folder.

$ ng build - -prod

Deploy the App

With all the setup is done and release build is ready, we are one step away to deploy our app on the Firebase site.
Now run following command to deploy the app.

$ firebase deploy

...and we are done!!!

Now open the hosting URL https://angular7-todo-app.firebaseapp.com in the browser.

Create Multi-Project App in .Net Core 3.0

Sanjay Saini — Mon, 16 Dec 2019 08:57:35 +0000

Some time back .Net Core version 3.0 was released and I thought to explore it and then an idea came to me about creating multi project application the same way we create in .Net Framework.
.Net Core is an open source framework for developing and deploying cross platform application on any platform. Check out this link to learn more about .Net Core.
To demonstrate how we can create, build and deploy multi project app in the .Net Core 3.0, I have decided to develop a sample functional CVS Validator console app. I will explain the functionality of this app later.
First, we need to setup development environment.

Prerequisite

We basically need .Net CLI tools, .Net Core Runtime and a code editor in order to develop and run .Net Core app on our machine.
.Net CLI tools, .Net Core Runtime comes with the .Net Core SDK so download and install the latest version of .Net Core SDK available from this link.
And for code editor I will recommend VS Code but if you already have any other code editor that you are using to write C# code then stick with that otherwise download and install VS Code from this link.
After installing SDK and VS Code, open the command prompt and run following command to check if SDK installed properly.

dotnet --version

You must get the latest version number as a result.

After done with the environment setup we are ready to develop our CSV Validator console app.

Create Application Code Scaffolding

This app will have a solution file and three projects to contain code for client, CSV data validation functionality and unit testing.

Create Solution and Projects

So now go to the folder location where you want to develop the app and open the command window (since I have GIT installed on my machine, I will be using git bash window).
Create solution by running following command in the command window.

dotnet new sln -o CsvValidatorApp

It will create CsvValidatorApp folder with the same name solution file in it.
Now we need to create projects under this folder so move into this folder.

cd CsvValidatorApp

First, we will create console type project that will be startup Client project and entry point of our app. So run following command in the command window to create it.

dotnet new console -o CsvValidator.Client

Second one will be class library type project that will contain all the functionality for loading, validating and rendering validated csv file. So run following commands in the command window to create it.

dotnet new classlib -o CsvValidator.Data

The last one will be the nunit type project for the unit testing of class library project code that can be created by running following commands in the command window

dotnet new nunit -o CsvValidator.Test

Add Projects in the Solution

Now we need to include the projects into the solution by running following command in the command window.

dotnet sln CsvValidatorApp.sln add CsvValidator.Client/CsvValidator.Client.csproj CsvValidator.Data/CsvValidator.Data.csproj CsvValidator.Test/CsvValidator.Test.csproj

Add Project Reference

Now we need to add reference of our class library Data project in the console app Client project. For that run following command in the command window.

dotnet add CsvValidator.Client/CsvValidator.Client.csproj reference CsvValidator.Data/CsvValidator.Data.csproj

And also add reference of class library Data project in the Test project by running following command.

dotnet add CsvValidator.Test/CsvValidator.Test.csproj reference CsvValidator.Data/CsvValidator.Data.csproj

Build and Run Application

As we are done with all the scaffolding code creation we are now ready to build the app for the first time by running following command in the command window.

dotnet build CsvValidatorApp.sln

I am sure you won’t get any error since there is not much code in there.
You can run the app by running the console Client project and get the standard “Hello World” message in the command window.
Run following command to run the app.

dotnet run -p CsvValidator.Client/CsvValidator.Client.csproj

or change to CsvValidator.Client folder and run following command.

dotnet run

And To run the test project, simple run following command.

Dotnet test CsvValidator.Test/CsvValidator.Test.csproj

Start Coding the App…

Now you are ready to put flash into bare bone scaffolding code of this app and for that we need to open the code editor in the application solution folder.
To open the VS Code in the folder, run following command.

code .

Get the source code of this app from my GitHub repository from this link and start adding code files and code details in your app.

About CVS Validator App

This app take the csv file and validate the data according to the validation provided to it in an xml file and generate the validated csv file at the location of the source csv file. Both files path are configured in the app configuration file. The sample of both files are in my GitHub repository along with the source code of the app. More details about the app can be found in the README.md file in the repository as well.