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.

Tips

How to update bower packages?

bower update

Author:

Tomasz Kowalczyk

Posted with : WEB

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