In the Previous Tutorial, we learned the following –
- What is Object Oriented Programming (OOP)?
- What are OOP principles?
- Prerequisites for this tutorial
In this tutorial we’ll continue that learning and setup our system so that we can learn by doing, instead of reading dull & boring information.
Let’s get started.
Google Chrome browser
I’ll be using Google Chrome Browser mainly for its Developer Tools. If you right click over any opened page in Chrome and select Inspect, it opens the Developer Tools either in the lower part of the browser or in the right pane (depending on your local configuration).
Visual Studio Code (VS Code)
- Download Visual Studio Code (VS Code)
- I’ll be using VS Code as a code editor. While you can use any other editor, I’ll recommend it for ease of use and high flexibility.
- I’ll be using VSCode’s extension Live Server to host a basic server. You can use any other server. However if you want to use live Server this is how you can configure it –
- Launch VS Code
- Click on the Extensions icon in the left panel and search for extension “Live Server”. Click on the Install button to install the extension. Note: In the below screenshot you are not seeing Install button because it is already installed in my system.
- Once you have installed the Live Server all you need to do to turn it on/off is to click on the Go Live icon at the footer of the VS Code. The current opened folder in VS Code will act like the root of the server.
Creating folder and files
- Create one folder named “OOJS“.
- To open the folder in VS Code select File -> Open. Go to the directory where OOJS folder is created and select that folder.
- Create two files “index.html” and “myjs.js”.
Writing boilerplate code
- To test the setup our myjs.js file will contain only one line of code
- Now open index.html in VS Code and include some boilerplate code. And here comes the magic of VS Code. Just type ‘!‘ without quotes and press tab. Refer the gif below, it should add following boiler plate code –
- Modify index.html and make it refer myjs.js file. This is how the final code should look like –
- If the Live Server is not running turn it On and navigate to the following URL in Google Chrome to access our website – http://127.0.0.1:5500/index.html.
- Open Developer Tools -> Console and if everything is setup properly you should see the following message – Hello World!
Congratulation!!! We’ve successfully configured our development environment. We did the following setup –
- Google Chrome & its Developer Tool
- Visual Studio Code (VS Code)
- Live Server (VS Code extension)
- Running the app and verifying Hello World