31 lines
1.5 KiB
Markdown
31 lines
1.5 KiB
Markdown
---
|
|
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.
|