How to prepare for Front-End Development

How to prepare for Front-End Development (development environment)

Most of web projects has its own Front-End side, which is also known as a client side because it is something that will be used by page visitors. Front-End works in web browsers so every Front-End developer has to be familiar with technologies such as HTML, CSS and JavaScript (of course with some frameworks).

It this short introduction I am going to describe how to start the Front-End side of the project, how to properly configure environment and how to use:

- AngularJS;
- Bootstrap;
- Angular ui-router;
- bower package manager;
- http-server.

In the first step it is a good practice to create a new folder for our project:

mkdir new_project_name

cd new_project_name

All of the following commands should be typed in the console window in the newly created folder for our project.

  1. npm init --yes to create package.json config file

  2. bower init to create bower.json config file

  3. Add .gitignore file with bower_components/ line (of course when we are going to use Git as source control)

  4. Add some commonly used front-end frameworks:

    • bower install angular --save
    • bower install angular-ui-router --save (recommend instead of ngRoute)
    • bower install jquery --save
    • bower install bootstrap --save
  5. Add index.html file

  6. Run simple web server http-server -a localhost -p 8000. http-server is a simple web server for static files.

After above steps we are ready to use AngularJS, Bootstrap in our web project.


How to update bower packages?

bower update


Tomasz Kowalczyk

Posted with : WEB

If you liked this post, you can share it with your followers or follow me on Twitter!