The only way to learn a new programming language is by writing programs in it.

― Dennis Ritchie

Table of Content

• Introduction
• History
  • Angular
  • React
  • Vue
• Requirements & Installation Process
  • Angular
  • React
  • Vue
• Conclusion

Introduction

This article provides a step by step guide on how to install the three most popular javascript framework/library in the world of frontend web development. Many articles explain how this is done, but in this article, I try to break things into a precise and concise manner you can always refer to this anytime you want to install or setup a React, Vue or Angular application

As we all know, Javascript is the heart and soul of frontend web development. To build complex web applications, using vanilla javascript is probably not the right choice as you may end up pulling the hair out of your head.

To make things easier and product development faster, a library like jQuery was introduced in 2006.

Later on, in 2010 Angular js was created by Google. It became the first framework that provided a complete architecture for front-end application development.

Fast forward to today, and we have the big 3 that dominate the world of frontend web development (Angular, React and Vue)

Each of these tools is unique and can perform the same function effectively. One fact that cannot be ignored is that there will always be a debate about which is better among the three, but in this article, our focus is on how to set them up on our machine.

History

Angular

Initially released by Google on 14th September 2016.It is completely different from Angular Js which was created years earlier by the Google team. Angular was created to serve as an alternative to Angular Js which has been placed on long term support until December 31, 2021.

At first release, Angular was initially called "Angular 2". However, this caused a lot of confusion and the name Angular without any suffix was chosen.

Angular is written in Typescript, which is a superset of Javascript. The Angular team are committed to making a major release once every 6 months.

As of today, the latest release is version 10 which was released June 24, 2020.

React.js

Also known as React or React.js. It is an open-source JavaScript library. React was created by Jordan Walke, a software engineer at Facebook.

Initially released on May 29, 2013, it is maintained by Facebook and a community of developers.

React is written in Javascript and it is regarded as the most popular and widely used between Angular and Vue.

The current stable version is 16.13.1, released on March 19, 2020.

Vue.js

Also called Vue is also an open-source JavaScript library just like React. It makes use of the model–view–viewmodel structure.

Created by Evan You, it was released in February of 2014. The creator Evan You worked on Angular Js originally at Google.

Vue Js is written in Javascript. The current stable release is on August 20, 2020.

Requirements & Installation Process

ANGULAR

We are going to install and run the Angular application in 4 easy steps:

Step 1:  Download Node.js

To use Angular, the first step is to install Node.js. Node.js is an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.

The installation of Node comes along with NPM(Node Package Manager). NPM is the tool we will be using in the terminal to install other 3rd party libraries needed to run an Angular application.

If you don't have Node.js installed on your machine, you can do that here

Step 2:  Install The Angular CLI

Once Node.js has been installed on your machine, this stage involves installing the Angular CLI. We can do this by opening the terminal and running the command below:

npm install -g @angular/cli

Once the installation process is complete, you can type ng v in the terminal to confirm if it was successfully installed. That command will display the version of Angular you have running on your machine.

Step 3:  Create a New Angular Project

Now that the Angular CLI has been installed, we now have access to the ng command in our terminal.

To create a new project we can run the command below:

ng new my-first-project

ng represents the angular command*, new* represents the fact it's a new project and my-first-project signifies the name of our project.

Once the installation process is complete and the needed dependencies and files downloaded, the next thing to do is to navigate into the project directory. We can do this by running the cd my-first-project command in the terminal*.*

Step 4:  Run The Application

To run the application and display it on the browser, we will run another command from the terminal, shown below:

ng serve --open

Once this command has executed successfully, a tab should open in the browser showing the Angular boilerplate template

We just successfully run an Angular application. By default, our application will be running on localhost:4200

Addition

To prepare and bundle our app for production, we can run the ng build --prod command in the terminal. This will minimise and bundle our application making it ready for deployment.

REACT.JS

We will work on two different ways of setting up a React project. The first one will be done using the create-react-app command, and the second one will be set up using Webpack and Babel.

Using The create-react-app Command

This will be done in two(2) easy steps.

Step 1:  Install create-react-app

To have access to the create-react-app command, we need to install it on the terminal using npm. The command to that is shown below:

npm i create-react-app

Step 2:  Create Project With NPX

We can now create a new project using npx. npx is a package runner tool that comes with npm version 5.2 and above. It allows us to create a new React project from the terminal by running the command below:

    npx create-react-app my-first-app
    cd my-first-app
    npm start

Above we created a new project called my-first-app , we moved into the newly created project directory and started the project with npm.

By default, our project will be running on localhost:3000 in the browser. To prepare and bundle our app for production, we can run the npm run build command in the terminal.

Using Webpack and Babel

This involves a much longer process to run React. It will be done in 7 steps.

Step 1:  Create The Project Folder

To install React using this method, we will create a new folder to install all the required dependencies. We can do this with the command below:

C:\\Users\\user> mkdir my-first-react-app
C:\\Users\\user> cd my-first-react-app

Step 2:  package.json

To install any dependencies, a package.json file is required to be installed in the project. To do this, we will run the npm init command in our project directory, from the terminal.

C:\\Users\\user\\my-first-react-app> npm init

The above command will require some information like the name, author, description version etc. to be filled in the terminal. A sample of this can be found below:

C:\Users\user\my-first-react-app>npm init
Wrote to C:\my-first-react-app\package.json:

{
   "name": "my-first-react-app",
   "version": "1.0.0",
   "description": "My First React App",
   "main": "index.js",
   "scripts": {
      "test": "echo \\"Error: no test specified\\" && exit 1"
   },
   "keywords": \[\],
   "author": "",
   "license": "ISC"
}

You can skip filling all the data above by adding a -y flag to the npm init command.

npm init \-y

Step 3:  Install React and React Dom

So for React to work on our project, we need to install React and React Dom. To do this, we will run the command below:

C:\\Users\\user\\my-first-react-app\> npm install react
C:\\Users\\user\\my-first-react-app\> npm install react-dom

Step 4:  Install Webpack and Babel

Let's start with Webpack. Webpack is going to require three things to be installed.

The Webpack CLI, the Webpack Dev Server and Webpack itself. All this can be done with the command below:

C:\\Users\\user\\my-first-react-app\>npm install webpack webpack-dev-server webpack-cli --save

Next up to install is Babel. Some of the Babel dependencies we are going to install include:

• babel preset env - This package allows the compiling modern Javascript down to ES5.
• babel preset react - This package allows the compiling JSX down to Javascript
• babel-loader - This package allows transpiling JavaScript files using Babel and webpack.
• babel-core - Gives us access to the Node API.

Now let us install them by running the command below:

C:\\Users\\user\\my-first-react-app\>`npm i @babel/core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin --save-dev`

Babel is now installed!

Step 5:  Create All Necessary Files

We need to create the files needed for us to set up and bootstrap the application. These files are going to be created in the root folder (my-first-react-app) of the application. They include:

1. index.html
2. App.js
3. index.js
4. webpack.config.js

Step 6:  Configure Rules, Loaders and Dev Servers

Next step is to open up the files and complete the setup. We start with the index.html file*.*

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First App</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

The important thing to take note of in our index.html file is the div with the id called app. 

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
            <h1>Hello World</h1>
      );
   }
}
export default App;

This is the part of our code that will be shown in the browser. When we eventually run the application, we should see a Hello world text.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

The App.js is imported into the index.js file, this enables us to render it into the browser.

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(\_\_dirname, 'dist'),
    filename: 'index\_bundle.js',
    publicPath: '/'
  },
  module: {
    rules: \[
      { test: /\\.(js)$/, use: 'babel-loader' },
      { test: /\\.css$/, use: \[ 'style-loader', 'css-loader' \]}
    \]
  },
  mode: process.env.NODE === 'production' ? 'production' : 'development',
  plugins: \[
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  \],
  devServer: {
    historyApiFallback: true
  }
}

From the above code, we set the entry point of the application as index.js. Then the output path is where we will bundle the app for production. This will be done inside the dist folder.

In the mode object, we can either set the app to be bundled for either production or development mode. This will be done in the package.json file

Step 7:  Setup package.json File

"scripts": {
    "start": "webpack-dev-server",
    "build-for-windows": "SET NODE\_ENV='development' && webpack"
  },
  "babel": {
    "presets": \[
      "@babel/preset-env",
      "@babel/preset-react"
    \],
    "plugins": \[
      "@babel/plugin-proposal-class-properties",
      "@babel/syntax-dynamic-import"
    \]
  }

On opening the package.json file, you may come across "test" "echo \"Error: no test specified\" && exit 1" inside the scripts object. You should clear it off and post the above code in the scripts object.

In the build-for-windows object, we set up our app to run in development mode. We can change it to production when we are ready to deploy the app.

Now inside the root of our application, we can start our application with the command below, like so:

C:\\Users\\user\\my-first-react-app\>npm start

The app will run on  http://localhost:8080 by default. If we go to this address on the browser, we should see Hello World on display.

To generate the bundle needed for deployment, we can run the command below in the terminal.

C:\\Users\\user\\my-first-react-app\>npm run build-for-windows

So that is how React can be created using Babel and Webpack.

VUE.JS

We will be setting up Vue with the Vue CLI. This will be done using yarn in 3 easy steps.

Note: In case you don't have yarn installed on your machine, you can install it with npm by running the npm i yarn command.

Step 1:  Install The Vue CLI

We do this by running the command below:

yarn install -g vue-cli

With this, we have installed Vue globally on our machine.

Step 2:  Create a New Vue Project

To complete this step we run the command below:

    vue create first-vue-app

This will show the options below in the terminal.

    Vue CLI v4.5.6
    Please pick a preset: (Use arrow keys)
    > default (babel, eslint)
      Manually select features

To keep things at a basic level, we can select the default option.

Step 3:  Run Vue App

To run the application, we need to move into the project directory which is first-vue-app with the command below:

    cd first-vue-app
    yarn serve

Now, the project will become accessible at http://localhost:8080/ by default in your browser!

Conclusion

So that is pretty much everything that is needed to set up an Angular, React or Vue application. If you have any issue during the installation process, please feel free to drop a comment, I will be sure to respond to it.

Also, you can subscribe to my newsletter