0.0.3-alpha • Published 4 years ago

@geoweb/core v0.0.3-alpha

Weekly downloads
-
License
Apache-2.0
Repository
gitlab
Last release
4 years ago

geoweb-core

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:

  1. npm run install
  2. npm run build
  3. npm pack

In yourproject:

  1. cd <path/to/yourproject>
  2. npm install <absolute path/to/tar/created/by/npm pack>

Bundling, packaging and publishing to NPM

  1. Make sure to set the right version in package.json
  2. npm run install
  3. npm run build
  4. npm pack
  5. npm publish --access public
  6. Check https://www.npmjs.com/settings/geoweb/packages

Setup prettier with vscode

  1. Download the prettier extension for vscode (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
  2. Update your settings: File->Preferences->Settings and open the settings.json as text
  3. 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.