Category Archives: Development

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:

Angular Snippets (Version 12)
- Helps creating block of HTML or Typescript
- https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2
Angular Language Service
- This extension provides a rich editing experience for Angular templates, both inline and external templates
- https://marketplace.visualstudio.com/items?itemName=Angular.ng-template
TSLint
- TSLint helps by showing directly in your code linters errors
- https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin
Auto Import
- This helps importing librairies for you, automatically adding those imports at the proper place
- https://marketplace.visualstudio.com/items?itemName=steoates.autoimport
Angular Files
- With this one, when you create a new file, it will scaffold the basic content based on file extension.
- https://marketplace.visualstudio.com/items?itemName=alexiv.vscode-angular2-files
Angular2-switcher
- Allow you to switch from each files of a component using a shortcut (alt+ p | o | u | i)
- https://marketplace.visualstudio.com/items?itemName=infinity1207.angular2-switcher
Material Icon Theme
- This helps by showing icons for files and folders, not mandatory though
- https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

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

Angular journey – Introduction + Gitea server configuration

Recently my dear was looking for an application to manage her wine cellar. As a former web developer, I immediately wanted to create the best app for her needs. However, I was a PHP developer, and it was not the best language to develop such a tool. So, I decided to learn Angular, I did that for a month, ended up with a nice structure then I had to stop, because of my new position which was too intense to let me continue.

Now, I have been able to keep some time for me, so here I am starting over with Angular 12, yes, many updates were released since my first iteration and as a newbie, I think it would be better to start everything over…

Anyway, first thing first, I need to setup my workspace and this is the page to start with. Let’s go…

Infrastructure

Gitea server – code management

In order to keep track of my code, I will try to use Gitea which was highly recommended on the web, using a Docker container.

Docker compose

Here the docker compose file I used to create a very basic server

version: "3"

networks:
  gitea:
    external: false

services:
  server:
    image: gitea/gitea:latest
    container_name: gitea
    environment:
      - USER_UID=1000
      - USER_GID=1000
    restart: always
    networks:
      - gitea
    volumes:
      - gitea:/data
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro
    ports:
      - "8010:3000"
      - "222:22"
volumes:
  gitea:

Then launch docker-compose up -d to start the container in background mode

Browse your Docker server IP address on the 8010 port, for me it is http://192.168.1.24:8010/ you should arrive on the configuration page:

Database: SQLite3 to avoid having a separated SQL server for my own small projects
…
Gitea Base URL: you can use the current IP mode, or use a reverse proxy with Let’s encrypt to make things more secure/professional, it’s up to you.
Email settings: think about adding the port in the end, for instance: smtp.gmail.com:465

Once your done, you can access and authenticate to your brand new Gitea server.

Configure the repository

Use Gitea web interface to create a new Organization then a new repository, there is nothing complex here. Once it’s properly setup you should end up with a single file project (the README.md) on your repo. On the project’s page, locate the HTTPS part and copy the URL on its right.

Install GIT client on Windows

In order to get Git command, install the following chocolatey package

chocolatey install git

Next, open a PowerShell client, browse to your project repository, then run the following commands, using the HTTPS URL you got just before

git init
git remote add my-project https://git.yourdomain.ca/MyOrganization/my-project.git

To pull your repository content, which is actually only your README.md file, run the following command

git pull my-project master

You should now see the README.md file on your computer’s local folder.

If you want to push, this is the command

git push my-project master

This is it for this introduction, next time I will discuss about installing NodeJS, NPM and eventually Angular!