Photo by Daniel McCullough on Unsplash
Introduction
This post is a first of a series aiming to show how to build an angular application from scratch.
We will see how to scaffold an enterprise-scale angular application with all the assets needed to easily develop and maintain it.
This first post doesn't dive deep into how git, node nor angular-cli works. It paraphrases their documentations and gather the informationinto one post. For more informations about them, refer to their documentations.
Getting Started
Start by creating a new angular workspace and application using git & angular-cli.
Install Git
Follow the instruction here.
Install Nodejs and Npm
Install Nodejs and Npm here.
You can find a lot of great article on dev.to to help you install Nodejs and Npm if you have any trouble with the official documentation.
Install NVM (Linux only, sorry not sorry :p)
NVM helps you install and change the node version used according to the directory/project you are working in.
To install or update nvm, you should run the install script. To do that, you may either download and run the script manually, or use the following cURL
or Wget
command:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
or
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
Running either of the above commands downloads a script and runs it. The script clones the nvm repository to ~/.nvm, and attempts to add the source lines from the snippet below to the correct profile file (~/.bash_profile
, ~/.zshrc
, ~/.profile
, or ~/.bashrc
).
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
To use it :
nvm install 10 # only install a version once
nvm use 10 # nvm use 8, adapt on the project your work
Install the latest Angular CLI
Install the Angular CLI globally.
To install the CLI using npm, open a terminal/console window and enter the following command:
npm install -g @angular/cli
Create a workspace and initial application
You develop apps in the context of an Angular workspace.
To create a new workspace and initial starter app:
Run the CLI command ng new and provide the application name (ie. ng-shadow), as shown here:
ng new ng-shadow
The ng new
command prompts you for information about features to include in the initial app. Accept the defaults (except for stylesheet by chosing SCSS
) by pressing the Enter
or Return
key.
The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.
The CLI creates a new workspace and a simple Welcome app, ready to run.
Run the application
The Angular CLI includes a server, so that you can easily build and serve your app locally.
Go to the workspace folder (ie. ng-shadow
).
Launch the server by using the CLI command ng serve
, with the --open
option.
cd ng-shadow
ng serve --open
The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.
The --open
(or just -o
) option automatically opens your browser to http://localhost:4200/
.
Top comments (0)