Learn how to create a local development environment by working with an example client-side application built on HTML, CSS, and JavaScript.
OverviewLocal development means setting up and running your project on your own computer instead of in the cloud or on a remote server. When you develop locally, you can work on your code without an internet connection and experiment without affecting the live application.
The steps required to configure a local development environment are different for each project, based on its programming languages, frameworks, tools, and dependencies. In this guide, you'll learn core skills needed to set up any project by working with an example client-side application built on HTML, CSS, and JavaScript. You can then apply those same skills to other projects in the future.
Before you can start, you'll need to install some essential tools that are widely used for local development.
Cloning and opening the repository in VS CodeFirst, make a copy of the repository on your computer by cloning it.
Open Copilot Chat, then ask it to identify what you need to install with the following prompt.
TextWhat do I need to install to develop this project locally?
What do I need to install to develop this project locally?
For this example, Copilot will say that this project needs Node.js. Node.js allows you to run JavaScript code on your computer and provides tools for web development.
Ask Copilot how to install the project requirements, then follow the steps to install them on your computer.
For this example, we could ask "How do I install Node.js?" Copilot will provide instructions for visiting https://nodejs.org/ and downloading the installer.
Now that you have the required software installed, you need to understand how to use it for this specific project.
Check the README file first. Most projects include a README file in the root directory that explains how to set up and run the project. For this project, both the README file and asking Copilot will tell you that the next step is to install the project's dependencies using npm, the Node.js package manager.
Open the Command Palette by pressing Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac).
Type Terminal: Create New Terminal
and press Enter.
In the terminal tab, paste the following command.
Bashnpm install
npm install
Because this project uses Node.js, we used npm install
to read the package.json
file and download all the dependencies the project needs to work properly. Other types of projects will use different commands. For example, Python projects might use pip install -r requirements.txt
, and Ruby projects might use bundle install
.
If the README doesn't include information about installing dependencies, you can:
package.json
, Python projects use requirements.txt
, and Ruby projects use Gemfile
.Now that your development environment is set up, you can start the development server and use it to preview changes to your code.
Find out how to start the project by checking the README file in your project folder.
For this example, the "Steps for running locally" section of the README explains that you can start the development server with the npm start
command. Enter the following command in your terminal.
To identify where the local server is available, review the terminal output. You'll see that the local server is available on http://localhost:8080. Navigate to that address in your browser.
Make a small change to the code, such as editing some text in the HTML file or changing a color in the CSS file. Save your changes.
Check the project documentation or terminal output to understand how to see your changes. Some projects automatically refresh after you save the changes, while others require refreshing your browser window.
For this project, refresh your browser window to see your changes.
If the README doesn't contain the information you need, check the configuration files for available commands. You can also ask Copilot Chat with the following prompt.
TextHow do I start this project locally?
How do I start this project locally?
What's next?
Now that you've successfully set up your first local development environment, it's time to apply these skills to different types of projects.
Practice with a different project: Try setting up another project with different requirements. For example, @new2code's Python web application uses Python and Flask instead of Node.js.
Use what you learned in this tutorial to:
This practice will help you recognize patterns across different technologies and build confidence in your ability to set up any project locally.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4