@geoweb/core v0.0.3-alpha
geoweb-core
- geoweb-core
- Install environment
- Development
- Troubleshooting
- License
Install environment
To run and develop geoweb-core you need npm. The easiest way to install npm is via nvm. Please visit https://nvm.sh/ and follow the instructions. When nvm is installed, please do the following command:
nvm install 8
After that you need to install its dependencies, do inside the geoweb-core folder:
npm install
To start the storybook do:
npm run storybook
Development
Application Sructure
The application structure presented in this boilerplate is fractal, where functionality is grouped primarily by feature rather than file type.
|-- src
|-- components
|-- Modal
|-- Modal.tsx
|-- Modal.test.tsx
|-- Modal.types.ts
|-- Modal.utils.ts
|-- index.ts
|-- ModalHeader
|-- ModalHeader.tsx
|-- index.ts
|-- utils
|-- modules
|-- sources
|-- mapviewer
|-- layerManager
|-- timeslider
|-- components
|-- TimeSlider
|-- TimeSlider.tsx
|-- TimeSlider.test.tsx
|-- TimeSlider.types.ts
|-- TimeSlider.utils.ts
|-- index.ts
|-- TimeSliderBtn
|-- TimeSliderBtn.tsx
|-- index.ts
|-- store
|-- reducer.ts
|-- actionTypes.ts
|-- actions.ts
|-- types.ts
|-- selectors.ts
|-- sagas.ts
|-- utils
|-- assets
|-- pages
|-- config.ts
|-- index.ts
|-- screenmanager
|-- assets
|-- config.ts
|-- store.ts
Inspecting the components with storybook
Storybook can be used to view the components.
If you run npm run storybook
a storybook server will start in which you can see all the components for which stories
are written.
Writing a new story
Stories live in the stories folder. Here is the documentation on the syntax for adding new stories: https://storybook.js.org/docs/basics/writing-stories/
Deploying a static version of your storybook
The storybook can be compiled to a static version via npm run build-storybook
. The static contents are then placed in the folder storybook-geoweb-core.
Removing extraneous packages
During development, we may end up with packages that have been installed but are not actually being used. In order to remove them, run npm prune
. Please refer to the documentation for more information.
Tests
Tests can be run by the following command:
npm test
This will run all the tests specified in the stories without starting a browser.
Currently only the mounting of components is tested, no interaction testing is implemented yet.
In order to see a coverage report please use:
npm run test:coverage
Testing the package in another project
To test the package in another project without publishing it, you can follow these steps:
In geoweb-core
:
npm run install
npm run build
npm pack
In yourproject
:
cd <path/to/yourproject>
npm install <absolute path/to/tar/created/by/npm pack>
Bundling, packaging and publishing to NPM
- Make sure to set the right version in package.json
npm run install
npm run build
npm pack
npm publish --access public
- Check https://www.npmjs.com/settings/geoweb/packages
Setup prettier with vscode
- Download the prettier extension for vscode (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- Update your settings: File->Preferences->Settings and open the settings.json as text
- Paste the code below at the right place in settings.json
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": true
},
"[javascriptreact]": {
"editor.formatOnSave": true
},
"[typescript]": {
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.formatOnSave": true
},
To run it on all code do npm run prettier
After this, you will get a report on the console, where the files presenting formatting problems that have been fixed be highlighted.
Please note that if you always use VS Code to edit files, they will always adhere to the prettier rules (that can be found at the project root, in a file called .prettierrc).
Code guidelines
Naming conventions
Regarding our file structure:
- In general, folders shall be named using camelCase
- Files and folders containing components shall be named using PascalCase
- Files with genetic names (such as 'reducer.ts', 'index.ts') shall be named using camelcase.
Ignoring ESLint rules
If, for some reason, ESLint needs to be ignored, a reason must be stated. For example:
// eslint-disable-next-line
would be considered incomplete. Instead, add the reason for ignoring the line:
// eslint-disable-next-line no-unused-vars
Documentation
It is possible to automatically generate documentation from the source code using TypeDoc.
In order to do so, please use npm run docs
.
Please note that nothing will be created if the code contains errors. Otherwise, a new docs
folder will be created under the root folder.
Troubleshooting
VS Code not redeploying on save
When developing with VS Code, you might notice at some point that your application is not being redeployed when making changes. Please refer to the documentation for solutions:
"Visual Studio Code is unable to watch for file changes in this large workspace" (error enospc)
License
This project is licensed under the terms of the Apache 2.0 license.