---
title: Quick Start
layout: default.hbs
---
# Quick Start
This primer shows you how to put a map on a web page. The development setup uses [Node](https://nodejs.org/) (14 or higher) and requires that you have [`git`](https://github.com/git-guides/install-git) installed.
## Set up a new project
The easiest way to start building a project with OpenLayers is to run `npm create ol-app`:
```bash
npm create ol-app my-app
cd my-app
npm start
```
The first command will create a directory called `my-app` (you can use a different name if you wish), install OpenLayers and a development server, and set up a basic app with `index.html`, `main.js`, and `style.css` files.
The second command (`cd my-app`) changes the working directory to your new `my-app` project so you can start working with it.
The third command (`npm start`) starts a development server so you can view your application in a browser while working on it. After running `npm start`, you'll see output that tells you the URL to open. Open http://localhost:5173/ (or whatever URL is displayed) to see your new application.
## Exploring the parts
An OpenLayers application is composed of three basic parts:
* The HTML markup with an element to contain the map (`index.html`)
* The JavaScript that initializes the map (`main.js`)
* The CSS styles that determine the map size and any other customizations (`style.css`)
### The markup
Open the `index.html` file in a text editor. It should look something like this:
```html
Quick Start
```
The two important parts in the markup are the `` element to contain the map and the `