Websites with Angular and Less CSS tutorials
3. Creating our project
av_timer2 minute read

So you're actually not wasting time and padding for content this time around?

  1. Topics of discussion
  2. Creating and running an Angular website
  3. What does building an app mean?

1. Topics of discussion

In this tutorial, we are going to create and run our web app using the Angular CLI. So, let's have some fun.

2. Creating and running an Angular website

Now that our environment is set up, I figured it's time we actually create our web app so we like, you know, have a place to code and stuff.

In order to do that, the first step would be for you to create a folder on your hard drive, called Projects. Once that is said and done, we need to open a Command Prompt in that folder. That is easily accomplished by navigating to the Projects folder and, in the folder address bar at the top of the folder, click on it, write cmd, and presto, you have a command prompt opened for that folder. Something like this:

Folder address bar

Folder address bar

Now that we have that out of the way, it's time to create our Angular app, by running the following command:

ng new recipe-site

This command invokes an Angular command (designated by thge ng) called new, which will create a web application called recipe-site.

When asked if you want routing, type y and then press Enter. And when it comes to stylesheet format, use your arrows to select Less and press Enter. After a few minutes, your application should be scaffolded in a folder inside your Projects folder called recipe-site.

You may receive some notifications or warnings about how Git is not configured. Just ignore them, they don't impact your work.

In the command prompt, type the following command:

cd recipe-site

cd stands for change directory and it tells the prompt to navigate to the folder with the given name.

And now, let's run our application, shall we? Type the following command:

ng serve --open

So what does that command do? Well, it basically builds your application and then launches it on your computer. By default, Angular applications run on port 4200. The --open part of the command tells the prompt that when the build is complete, it should open the website in your default browser (mine is Chrome).

3. What does building an app mean?

In the previous section I kept talking about building the application. You can run a build of your application by running the following command in the recipte-site folder:

ng build

The build process basically takes every component in your application and checks it for any and all errors, be it coding errors, missing imports etc.

If there are no errors, the next step is converting from Typescript, the language in which Angular is written in, to Javascript, the language that browsers can understand. After the build is finished, you'll have a bunch of files created in the dist/recipe-site folder. I don't know exactly what each file contains, but you don't need to worry about it. They are automatically included in the index.html file.

If I remember correctly, Angular does a build process whenever you run ng serve. However, there are some changes in some files which require you to do a build before you serve the application. That's why my recommendation when running Angular apps is the following:

  • run the ng build command first
  • after that, you can run ng serve --open

We will take a look at all of these concepts in more detail in the next tutorial. For now, this is all I have for you. See you next time.

No comments yet...