33 lines
1.7 KiB
Markdown
33 lines
1.7 KiB
Markdown
---
|
|
title: Basic project setup using NPM and Vite
|
|
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 [Vite](https://vitejs.dev/) as a development tool and to bundle our application for production. 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
|
|
|
|
*You will need to have `git` installed for the above command to work. If you receive an error, make sure that [Git is installed](https://github.com/git-guides/install-git) on your system.*
|
|
|
|
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, [Vite](https://vitejs.dev/) 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:3000/ 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.
|