Building a javascript app from scratch using Vite.js and the ArcGIS Javascript API. This method is quick, easy and fun to develop with. You will be amazed and the rebuild speeds.
Creating a Progressive Web App with Vite.js and ArcGIS JS API
The goal of Vite.js, a tool for web development, is to make creation, or standing up a progressive web app, as quick and lightweight as possible. Application frameworks like Vue.js and React are also natively supported.
Vite.js's ability to execute speedy hot module replacement (HMR) is a great benefit. To put it another way, the tool can refresh the code in the browser whenever you make changes to it, eliminating the need for a full page reload. This has the potential to greatly enhance the developer experience and streamline the process of creating and refining your program. In theory it is fantastic, in development it is even better.
Vite.js uses native ES modules, which means it can take advantage of up-to-date JavaScript features like import and export statements without the requirement for a transpiler like Babel. This also makes it easier to write and maintain your code, as you can use the latest JavaScript syntax without worrying about compatibility with older browsers.
The advantages of using Vite.js do not end with these functionalities, though.
It has a minimal footprint, a straightforward configuration file, and no mandatory external libraries or frameworks, making it incredibly accessible.
Its short development cycle makes it an excellent choice for massive software projects. Plus, built-in TypeScript support means you can utilize the type system to prevent bugs and make your code more stable. Vue.js, React, and Angular are just some of the tools and frameworks that play nicely with it.
Vite.js is a flexible and powerful framework for developing cutting-edge JavaScript applications. Its fast HMR and native support for ES modules make it a great choice for developers who want to create fast, efficient, and scalable applications.
To get started with Vite.js, you will need to have Node.js and npm installed on your machine. If you do not have these tools already, you can download and install them from the official website (https://nodejs.org/).
Once you have Node.js and npm installed, you can create a new Vite.js project by running the following command:
npm create vite@latest
The easiest way to run this code is to create a new folder somewhere (I use a folder named "repo") and from the address bar in the file explorer replace the path with "cmd" and press enter. This will launch a command window where you can run "npm create vite@latest".
This will create a new project with the required dependencies and files for Vite.js. The folder structure for your new project should look like this:
my-project/
|── package.json
└── src/
├── index.html
├── main.js
|── style.css`
To start using Vite.js, you will need to add some code to your project. Open the src/index.html file and add the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Getting Started Application</title>
</head>
<body>
<h1>Ready to Build a Spatial PWA</h1>
<script src="/src/main.js"></script>
</body>
</html>
This is a basic HTML file that includes a title element and an h1 element with the text "Hello, Vite.js!". It also includes a script element that will load the main.js file, which we will create in the next step.
Next, open the src/main.js file in your favorite IDE and add the following JavaScript code:
console.log('Hello, Vite.js!');
This simple code will print the message "Hello, Vite.js!" to the console when the main.js file is loaded.
Finally, open the src/style.css file and add the following CSS code:
body {
background-color: #222222;
background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px;
color: white
}`
This CSS code will change the background of the body element to a stripped grey.
With these files in place, you are ready to start using Vite.js. To start the development server, run the following command in your terminal:
npm run dev
This will start the development server and open the project in your default web browser. If using chrome, press F12 and you should see the "Hello, Vite.js!" message printed to the console, and the background color of the page should be stripped grey.
When you are ready to build your project for production, you can run the following command:
npm run build
This will create a production-ready version of your project in the dist/ folder. You can then deploy this folder to your production server or hosting provider.
The ArcGIS JavaScript API is a powerful tool for building web-based mapping applications. It is a comprehensive library that provides a wide range of features and functionality for building interactive maps, including support for 2D and 3D maps, geocoding, routing, and spatial analysis.
To get started with the ArcGIS JavaScript API, you can run the npm install command below and while using Vite.js, you can add your import statements. It is helpful to setup an ArcGIS Developer account and obtain an API key. Once you have an API key, you can include the ArcGIS JavaScript API in your web page by adding a script tag to your HTML code.
npm install @arcgis/core/@latest
You can then create a map by instantiating an Map object and adding it to your HTML page.
const map = new Map({
basemap: "streets"
});
const view = new MapView({
container: "map",
map: map
});`
This will create a basic 2D map using the "streets" basemap. You can customize the map by specifying additional options, such as the initial center point and zoom level, as well as adding layers and other features.
The ArcGIS JavaScript API also provides a range of tools for working with geospatial data, such as geocoding, routing, and spatial analysis. You can use these tools to perform tasks such as finding the distance between two points, or finding the closest location to a given point.
Overall, the ArcGIS JavaScript API is a powerful and versatile tool for building web-based mapping applications. Its wide range of features and functionality make it a great choice for developers looking to build interactive and feature-rich maps for their applications.
In the future we will talk about Calcite Components and now that it is out of beta, how to include it in your future builds. Currently, there is a Vite bug that can cause all calcite components to fail silently when building. It looks like that will be fixed in the 1.0.6 release later in Febraury.
You may notice that the previous code is not working when you run npm run dev. That is because I skipped right over loaders. Vite.js uses ES modules (also known as ECMAScript modules) for managing dependencies and code organization. To import and use an ES module in your Vite.js project, you will need to use the import statement.
For example, to import the ArcGIS JavaScript library and use it to display a basic map, you could do the following:
src/main.js file, import the Map and MapView functions from the ArcGIS JavaScript library:
import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';`
loadModules function to asynchronously load the required map modules, and then create a new map using the Map class from the ArcGIS JavaScript library:
async function createMap() {
// Create a new map
const map = new Map({
basemap: 'streets'
});
//create the view
const view = new MapView({
map: map
container: "mapDiv"
});
}
createMap function when the page is loaded:
createMap();
src/index.html file to hold the map:
<div id="mapDiv"></div>
With these steps in place, you should now have a basic map displayed on your page using the ArcGIS JavaScript library and ES modules in your Vite.js project.
This is just getting started by importing and using ES modules in a Vite.js project to display a basic map using the ArcGIS JavaScript library. Vite.js makes it easy to manage dependencies and organize your code using ES modules, and the ArcGIS JavaScript library provides a wide range of tools and resources for building interactive maps and spatial applications.
Next, we will cover extending an application to let users interact with the data dynamically, add and stylize a popup and possible setup a Calcite UI (from calcite beta for now).