The only way to learn a new programming language is by writing programs in it.
― Dennis Ritchie
Table of Content
- Introduction
- History
- Requirements & Installation Process
- 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 startAbove 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:
- index.html
- App.js
- index.js
- 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-appThis 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 featuresTo 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 serveNow, 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