Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 14 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ This is the monorepo for Deltares it's Vue components. We maintain it with

## `@deltares/vue-components`

This package contains the reusable Vue components to be used in your Deltares
projects. For its features and how to use it,
This package contains the reusable Vue components to be used in your Deltares
projects. For its features and how to use it,
[look here](packages/vue-components/README.md).

## `@deltares/design-tokens`

This package contains the raw design tokens for the Deltares projects.
⚠️ You probably don't need to include this as a dependency in your projects. If
⚠️ You probably don't need to include this as a dependency in your projects. If
you want the `@deltares/vue-components` to have the Deltares theme, look at the
`@deltares/vuetify-theme` package.
For more info [look here](./packages/design-tokens/README.md)
Expand All @@ -32,27 +32,27 @@ For more info [look here](./packages/vuetify-theme/README.md)

## `demo-app`

This package contains a demo app of how the `@deltares/vue-components` can be
This package contains a demo app of how the `@deltares/vue-components` can be
used. Use this app to test the components in a Real World App. For more
information about the `demo-app` [look here](packages/demo-app/README.md)

## Building components in `@deltares/vue-components`

In the root of this repo, run `npm run start`. The `demo-app` project will be
build and run, you can reference components from `@deltares/vue-components`
In the root of this repo, run `npm run start`. The `demo-app` project will be
build and run, you can reference components from `@deltares/vue-components`
directly. It features hot module reloading as well.

## Adding dependencies to packages

Because we use Lerna, we have the posibility to _hoist_ dependencies to the root
of the repo, while still have packages with their own `package.json`. The
benefit of this method, is that we have a single `node_modules` folder at the
of the repo, while still have packages with their own `package.json`. The
benefit of this method, is that we have a single `node_modules` folder at the
root of the repo, instead of having multiple in every `packages/*` folder.

This reduces the amount of duplicate files on your system by quite a lot.

_Hoisting_ packages to the root comes at a cost though. Using
`npm install <dependency>` is not enough.
_Hoisting_ packages to the root comes at a cost though. Using
`npm install <dependency>` is not enough.
Example: Say we want to install `@vue/test-utils` in `packages/vue-components/`
we have to do this:

Expand All @@ -61,4 +61,7 @@ $ cd packages/vue-components
$ npm install @vue/test-utils
$ cd ../../
$ npm run hoist
```
```

## ⚠️ TGS dependency ⚠️
For the timeline functionality we use an unpublished dependency https://github.com/gena/mapbox-gl-js/releases/download/v1.6.0-tiled-video-0.3/mapbox-gl-v1.6.0-dev.tgz in the demo-app. Therefore you may have to use `yarn` or use `npm install --force` in the root folder for things to work.
7 changes: 6 additions & 1 deletion netlify.toml
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
[build]
publish = "packages/demo-app/dist/"
command = "lerna bootstrap --hoist && npm run build"
command = "lerna bootstrap --hoist && npm run build"

[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Loading