Skip to content

Commit

Permalink
Updates to work with latest ol, Vite for dev
Browse files Browse the repository at this point in the history
  • Loading branch information
tschaub committed Jul 30, 2022
1 parent c01ee17 commit ebb8d4a
Show file tree
Hide file tree
Showing 16 changed files with 4,259 additions and 19,101 deletions.
2 changes: 1 addition & 1 deletion doc/book.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"honkit": "^3.7.1",
"variables": {
"workshopUrl": "http://localhost:3000"
"workshopUrl": "http://localhost:5173"
},
"links": {
"sidebar": {
Expand Down
6 changes: 3 additions & 3 deletions doc/en/deploying/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@

Throughout the workshop, we've been using a development server to view the examples. This is similar to the setup you would use when developing an application with the [`ol` package](https://www.npmjs.com/package/ol). When you're ready to deploy your application, you'll want to create a minified bundle of your application entry point with a build step.

We've been using [parcel](https://parceljs.org/) for module bundling during development. When we started the development server with `npm start`, we were running parcel in `development` mode. In `production` mode, the bundle is minified.
We've been using [Vite](https://vitejs.dev/) for module bundling during development. When we started the development server with `npm start`, we were running Vite in `development` mode. In `production` mode, the bundle is minified.

To build assets for deployment, we run our `build` script from `package.json`:

npm run build

This runs `parcel build index.html` and copies the `data` directory to the `dist/` folder.
This runs `vite build` and copies the `data` directory to the `dist/` folder.

After the build finishes, you'll have artifacts in the `dist` directory. These are the assets that you would deploy to your production server (or S3, or wherever you want to host your application). You can see what the app looks like by running a local http server.

npx serve dist

Now you can open http://localhost:5000/ to see how the application will look in production.
Now you can open http://localhost:3000/ to see how the application will look in production.

That's it. You're done!
8 changes: 4 additions & 4 deletions doc/en/vector/geojson.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,17 @@ You should now be able to see a map with country borders at {{book.workshopUrl}}

![GeoJSON features](geojson.png)

Since we'll be reloading the page a lot, it would be nice if the map stayed where we left it in a reload. We can bring in the [`ol-hashed` package](https://www.npmjs.com/package/ol-hashed) to make this work. This package is already installed as part of the workshop dependendencies. If it were not already included, you could install it with `npm install ol-hashed`.
Since we'll be reloading the page a lot, it would be nice if the map stayed where we left it in a reload. We can bring in the `Link` interaction to make this work.

Then in our `main.js` we'll import the function exported by the package:
In our `main.js` we'll import the new interaction:

[import:'import'](../../../src/en/examples/vector/sync.js)

Now we need to assign our map to a variable (named `map`) so we can pass that variable to the `sync` function:
We next need to assign our map to a variable (named `map`) so we can add the interaction to it:

[import:'map-const'](../../../src/en/examples/vector/drag-n-drop.js)

And now we can call the `sync` function with our map:
And now we can add a new link interaction to our map:

[import:'sync'](../../../src/en/examples/vector/sync.js)

Expand Down
Loading

0 comments on commit ebb8d4a

Please sign in to comment.