---
title: Basic project setup using NPM and Parcel
layout: doc.hbs
---

# Introduction

Modern JavaScript works best when using and authoring modules. The recommended way of using OpenLayers is installing the [`ol`](https://npmjs.com/package/ol) package. This tutorial walks you through setting up a simple dev environment, which requires [node](https://nodejs.org) for everything to work.

In this tutorial, we will be using [Parcel](https://parceljs.org) to bundle our application. There are several other options, some of which are linked from the [README](https://npmjs.com/package/ol).

## Application setup

Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project with

    npx create-ol-app

This will install the `ol` package, set up a development environment with additional dependencies, and give you an `index.html` and `main.js` starting point for your application.  By default, [Parcel](https://parceljs.org) will be used as a module loader and bundler.  See the [`create-ol-app`](https://github.com/openlayers/create-ol-app) documentation for details on using another bundler.

To start the development server

    npm start

You can now visit http://localhost:1234/ to view your application.  Begin making changes to the `index.html` and `main.js` files to add additional functionality.

To create a production bundle of your application, simply type

    npm run build

and copy the `dist/` folder to your production server.
