How to Clone and Run an Angular App on Your Machine
Introduction:
Angular is the best JavaScript framework for designing websites.The main purpose of Angular is to build single-page applications.It is suitable for developing:
- Enterprise Web Applications
- Progressive Web Applications
- Progressive Web Applications
- Interface with Animations
Cloning
To clone a GitHub project, the following requirement are needed:
- Stable version of Node.js
- Git
- GitHub account
It needs more effort and time to start a project from scratch.So we can clone one project from GitHub. Clone any open-source project and modify it based on your requirements. Angular supports cloning as the most popular framework.This framework helps to build best front-end applications.
1.Install the Node Package Manager
Node Package Manager (npm) is an online repository for JavaScript packages. It is the default project manager for Node js. npm has a CLI (Command Line Interface) to perform various tasks.
npm package is present in the Node.js. Check the Node.js and npm package versions using the following command:
- node –version
- npm –version
2.Install the Angular CLI
The Angular CLI is a command-line interface tool to perform various development tasks. It involves initializing, developing, and maintaining Angular applications.
To install the Angular CLI,
$ npm install -g @angular/cli
To check the Angular CLI version,
$ ng version
3.Find project on the GitHub
Select the project from GitHub.Navigate to the green button labeled Code in the GitHub. Click it to reveal a dropdown list. Now,copy either the HTTP or SSH link.
4.Clone the project
To clone the project, Create a folder and name it Angular-Clone.
cd Angular-Clone
To copy the project to the folder.
git clone https://github.com/Reuben-Kipkemboi/Giphy-Replica.git
Next, check the Angular-Clone folder for clone Giphy-Replica. Navigate to the folder
cd Giphy-Replica
Check the project files in a code editor and view them via the GitHub web interface.
5.Install npm Packages
To run the project, install all packages and dependencies from the cloned project. To install the packages,
run:npm install
6. Open the Project
The requirements are ready, open the project in a browser and can build it.
ng serve
Then open http://localhost:4400/ in a browser to view the project.
To open the project in a browser, use Angular CLI.
$ ng serve -o
This command is used to build the app, and look for updates.
In the browser, we can see the Giphy-Replica website.