Tag Archives: angular

Angular journey – locally serve your app

This page focuses on how to run your Angular application locally, during the development phase.

The following command will compile and re-compile live each time you update the code, plus this will be accessible from anywhere in your network (think about allowing ingress traffic, on your Windows firewall, for port 4200) with some additions:

  • –host set to 0.0.0.0 will allow any device on the network to access your server
  • –public-host set the URL you wanna access your app with, when using a reverse proxy (and I do)
ng serve --host 0.0.0.0 --public-host https://core-dev.fevio.fr/

As we are going to work with tokens, authentication, and service workers, we are going to need HTTPS. If not already done, you should configure your reverse proxy for a dev URL. Here we are going to use:

  • https://core-dev.fevio.fr

This will allow us to access our application from any local device (192.168.1.0/24) using a proper domain name, saving us headache caused by a lack of HTTPS.

For security purpose, I have added the following lines to limit this access only to local devices (this is specific to my architecture and written here as a reminder)

location / {
  # allow subnet 192.168.1.0/24
  allow   192.168.1.0/24;

  # drop the rest
  deny    all;
}

Angular journey – Visual Studio configuration

In order to develop faster, better and easier, it’s a good practice to take a moment to setup your dev environment. Her I am talking about how I configured my Windows 10 environment for Angular.

Visual Studio Code

Here we are cheap, meaning we won’t go with a non free solution like Angular-IDE, but using Visual Studio Code, you can do great things too!

To install VSCode using chocolatey:

choco install vscode

Now we can add extensions to VSCode in order to make things easier:

To install those extensions quickly, let’s open VSCode then hit ctrl+shift+` to open a terminal

Type the following command to install our extensions (unfortunately you can’t put all in one line):

code --install-extension johnpapa.Angular2
code --install-extension Angular.ng-template 
code --install-extension eg2.tslint 
code --install-extension steoates.autoimport 
code --install-extension alexiv.vscode-angular2-files 
code --install-extension infinity1207.angular2-switcher 
code --install-extension PKief.material-icon-theme

Angular journey – NodeJS, NPM and Angular installation

This time we will focus on installing all the necessary tools on our Windows system in order to start developing with Angular.

NodeJS installation

Run the following command on an admin PowerShell prompt. We are using the LTS version

chocolatey install nodejs-lts

Installing NodeJS should also add NPM, to check, run npm -v to see if it’s present on your system.

NPM and Angular CLI installation

We will need to install the Angular CLI as well, this tool will be handy to create our Angular projects, application and code. To do so, run the following code

npm install -g @angular/cli

You might have some warnings, they seem not important, so do not worry.

Angular project initialization

When it’s done, you can now initialize your Angular application using the following command

ng new my-project

They will ask you some questions

  • Would you like to add Angular routing?
    • This will help you routing your user requests, if you new to Angular, choose this option
  • Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/
    syntax#scss
    • This will let you choose which kind of style sheet you want to use, I decided to try SCSS which is way more powerful than regular CSS, but this part is totally up to you

Finally, run ng version to show which version of Angular you have actually installed