Guide to Set Up Your Local Web Development Environment

Having the perfect web development environment set up is the dream of every User Interface developer. Having a local environment enables the developers to work remotely on their client’s webpage from anywhere around the world. Even without internet connectivity, by setting up a proxy server, developers can continue their work uninterrupted by connectivity issues. In this article we will discuss how to setup a local web development environment.

What Will You Need

Setup of a local UI development environment is very easy and most of the items required are free of cost. Let’s take a look at what you will need.

• Operating System (Windows or MAC)
• Browsers
• An IDE (integrated development environment) or any text editor
• Hosting service or an account at Cloud Computing that enables the user to view hosted website
• Git Repository hosting service

Let’s take a deep dive into each of them.

Windows or MAC, What to Choose?

It does not matter whether you are using MAC or Windows for Web development. All the IDEs and text editors which are popular among developers are supported in both operating systems. The workstation also does not need heavy configuration since there is nothing to compile in web development and as a result, the application that you are about to develop will not be that much resource hungry. If you are planning to do server-side coding, there is command prompt in Windows and Terminal in MAC OS. However, it should be kept in mind that if you are planning to develop a web application specifically targeting Macbook or iPhone users, you will need MAC OS. Since VMWare and other software are available to virtually host a windows operating system on MAC, but a virtual environment hosting system for MAC is not available.

Install All the Latest Browsers

As per latest published stats, comparing all devices

• Chrome covers 61% usage share.
• The very next is Safari, covering 17% of the internet traffic.
• Firefox and IE both covers almost 5.6%.
• The remaining traffic is covered by Edge, UC Browser, Opera Mini, Opera and Android browsers.

If you are planning to develop a fully responsive website, browser compatibility is a factor that needs to be tested. You will need to install all the major browsers in your workstation and after development, perform proper unit testing in each of them. You will also need to install mobile device emulator plug-ins in the browsers for testing cross device compatibility of your developed website.

Speaking of responsiveness you can try LT Browser a dev-friendly browser in which you can see the mobile view of your website on Android and iOS resolutions & check its responsiveness. That too for FREE!!!

The Perfect Tool for Coding

In the UI development community there are multiple opinions regarding the usage of IDE as well as standard text editors. Finding the right tool is important since the basic elements of coding is text. Whether you are going to choose IDE or any lightweight text editor depends on the type of application you are going to develop.

• If you are using HTML/CSS, PHP or any other lightweight programming languages and your application is very simple, it is better to go for a standard text editor that supports color-coding. Notepad++ is the perfect tool for the job and is used by many web developers worldwide.
• If your application is simple and budget is not a constraint, go for Adobe Dreamweaver, the best IDE to develop responsive web applications.
• However, if your application is complex, multi-layered and you are using Angular or any advanced JS framework, an IDE that supports command-line interface, like Visual Studio Code or Atom is the perfect tool for the job since they will make your job easier by Intellisense, autocomplete features, etc.

Hosting Service

For hosting your developed webpage, you have 3 options

• Traditional dedicated hosting services, where a server located at your office or at a data center is reserved for your personal use
• Setting up your personalized virtual server on the cloud through paid hosting services.
• Managed hosting, which is same as traditional hosting but managed by a service provider.

If you are working for an organization that provides hosting service, it is the best choice since a team will be available for maintenance, troubleshoot and set up the dedicated server. And if you are working as a freelancer, Cloud based hosting services or managed hosting, both are equally beneficial alternatives.

Version Control

Using a repository hosting service is very important for a complex application where code changes are very common. Apart from pushing or pulling your code whenever needed, your entire source code will be hosted efficiently and you will be able to keep track of the changes that you made in the application.

There are multiple choices like GitHub, Microsoft Team Foundation Server, BitBucket, etc. Depending on your budget you can choose any of them. Repositories provide you the option of code sharing, where you can share your code to be reviewed by the customer as well as your peers.

All of the ingredients mentioned above can cook a very basic recipe for a web developer. For advanced development, there are other ingredients like a Content delivery network, content management system, Encryption services, task runners which can cook a delicious cuisine when combined with the basic ingredients. For starters, however, the basic stuff can enable you to develop a well-designed user-friendly web application.

Arnab Roy Chowdhury

Arnab Roy Chowdhury is a UI developer by profession and a blogging enthusiast. He has been writing content for about 5 years and has strong expertise in technical blogs, travelogues, and content in the latest programming languages.

See author's profile