Welcome to Public App!

Setup Local Web Development Environment

Setup Local Web Development Environment

Hey guys, this is Bhanu Stark. This is the fourth post on Full-stack web development.

In this post, we will know which tools we need for web development on the local machine.

Mainly, I will use 2 tools:

  1. Google Chrome (A web browser)
  2. Atom (IDE)

We will complete our course with only these two tools, later we will install some advanced tools and software like command-line tools, or database management software, But mostly we will use Google Chrome and Atom IDE.

So you may already have a Google Chrome browser on your PC but you may not have Atom editor.

Why do we need Google Chrome for web development?

The simple answer is “to see what you have made” but not only for that. Google Chrome is the best browser for development because it has its own developer tools.

Google Chrome developer tool includes:

  1. Elements – where you can see the rendered HTML in Google Chrome.
  2. Console – where you can see javascript echos, logs, and errors.
  3. Sources – where you can see the all downloaded files from the server to Google Chrome.
  4. Network – Here you can see that when your browser is connecting to the website and what is requesting.
  5. Performance – Here you can see the speed of loading assets or files from the website.
  6. Security – Here you can see if the page is secured with SSL or not and which type of SSL is.
  7. Memory – Here you can see that how your PC memory is used by the web page.
  8. Application – Here you can see the cookies, cache, tokens, local variables, and storage
  9. Lighthouse – The lighthouse is for generate the report of your web page’s performance, accessibility, and user experience.

Why do we need the Atom IDE for development?

IDE stands for Integrated Development Environment. An IDE provides features auto-complete, auto intends, errors just right after writing wrong code, and more.  So there are many great IDE available on the Internet like:

  1. Atom
  2. VS Code
  3. Brackets
  4. Sublime Text

If you like any other than the Atom IDE you are free to download and use that for this course.

And I am going to use Atom for this course.

You may be thinking that I don’t need an IDE, I will do that with a notepad! then yes, of course, you can do this but notepad doesn’t provide so many features as an IDE provides.

So it is better to choose an IDE from the four above for coding.

In every post of this course, you will see only Atom screenshots because I will use Atom IDE in the full course. This is because I live Atom IDE most and I have been using this for a long time.

If you have been using any IDE for a long time and you have experience in that then you should use that IDE without hesitating a second.

Atom IDE is totally free to download and use.

How to download and install Atom IDE?

  1. First, you have to go to Atom’s official website.
  2. Then click on the big DOWNLOAD button. After clicking on the download button, that software will be downloaded.
  3. After downloading go to your downloads folder then double click on the Atom setup file. Then it will be installed automatically.

Important thing:

There are a lot of Atom packages that increase its functionality. It has more than 8 thousand packages and they have different functions. And its packages are developed by different programmers for better code writing.

You can also install some of Atom’s packages to improve its functionality as your need.

I have chosen some of Atom’s packages that are most useful for this course.

  1. atom-beautify
  2. atom-ternjs
  3. emmet
  4. autoclose-html
  5. csslint
  6. pigments
  7. language-ejs
  8. atom-html-preview
  9. sublime-style-column-selection
  10. linter-eslint

How to download a package in Atom IDE?

  1. First, you need to open Atom IDE
  2. Then go to File Menu -> Setting -> Packages (for Windows OS)
  3. Then copy the package name from above and paste it into the search box
  4. Then you’ll see the list of packages that you have searched, then click on the install button(you need to install only these packages that have the same name as in above)

If you have any problem in installing and using Atom IDE, you can use VS Code.

Because VS Code is best alternative IDE to Atom.

VS code’s full name is Visual Studio Code.

So if you have successfully downloaded Google Chrome and Atom IDE. Then we will continue this course in the next post

Or if you have any issue in installing these tools, you can comment without any hesitation.

Here is the video of How to set up the local web development environment

Set up Local Web Development Environment

This video is in the Hindi language. If you have any issues in installing browser or IDE or Atom packages, you can watch the video. It will be very helpful for you.

Setup Local Web Development Environment

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top