Omgevingsbeleid front-end ·

Objectives

The Province of South-Holland believes that everyone should be able to easily view its policies. By digitalizing them, the province aims to make its policies more transparant, accesible, current, and informative. This way new initiatives can be carried out faster and better and in turn will result in more coherent policies. By storing policies in a database instead of in a document, the province also aims to make the proces of creating new or adjusting policies more efficient and in line with the new Dutch standards (STOP) for publishing governmental plans.

Application

The application digitalizes the 'physical living environment' policies of the Province of South-Holland. Non authorized users can search policies by text or using a map, see in what area they apply and and view connections between policies. Authorized users can adjust and manage the policies. You can view the roadmap here.

Standard for Public Code

It is the intent of the Omgevingsbeleid development community to develop the codebase collaboratively. Adhering to the criteria set forth in the Standard for Public Code gives us confidence in the process. Therefore, The Province of South-Holland is committed to maintaining and developing Omgevingsbeleid front-end at a level of quality that meets the Standard for Public Code.

Pre-Requisites

Setting up a local version

Clone and install packages

Create a new folder within your documents where you’ll clone the repository to. In Github go to the tab ‘Code’. Click the green button ‘Clone or download’ and copy the link. Using a Terminal, navigate to your recently added folder and run:

$ git clone https://github.com/Provincie-Zuid-Holland/Omgevingsbeleid-Frontend.git
$ cd Omgevingsbeleid-Frontend
$ yarn install

Create a .env file

Create a .env file in the root of the project.

REACT_APP_API_URL = 'https://api-obzh-dev.azurewebsites.net/v0.1' // Used in the API url (in instance.ts)
REACT_APP_GEOSERVER_API_URL = 'https://geo-omgevingsbeleid-test.azurewebsites.net' // Used in the Geoserver API url (in axiosGeoJSON.ts)
REACT_APP_API_ENV = 'dev' // Used in the API url (in instance.ts)
REACT_APP_KEY_API_ACCESS_TOKEN = 'OB_access_token' // Used to set login token
REACT_APP_KEY_IDENTIFIER = 'OB_identifier' // Used to set login identifier
REACT_APP_ERROR_MSG = 'Er is iets misgegaan, probeer het later nog eens' // Error message

The following environment variables are not necessary. They are used to initialize the Sentry bug tracker.

REACT_APP_SENTRY_DSN = '' // Contains the DSN to track bugs in Sentry
REACT_APP_RELEASE_VERSION = '' // Used to log version in Sentry bugs

Available scripts

This runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits to the code. You will also see any lint errors in the console.

yarn start

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

yarn test:local

Builds the app for production to the **\*build**** folder. It correctly bundles React in production mode and optimizes the build for the best performance.

yarn build

Builds the application just as yarn run build would do, but also purges the generated Tailwind files. There are two commands to create a build. One for windows prod:build-win and one for OSX prod:build-osx.

yarn prod:build-osx

yarn prod:build-win

Source File Structure

The project uses the following structure:

src
- api
- App
- pages
- components
- constants
- css
- hooks
- images
- mocks
- utils

src/api

The API folder holds our API Functionality. We use Axios as the HTTP client. In the /API folder there are three files for the different API's. It contains:

instance.ts - Which is our general API
axiosGeoJSON.ts - Which is our API to connect to the GEO Server
axiosLocatieserver.ts - Which is our API to connect to PDOK Location server

There are also two generated files which holds all of the endpoints and models. These files are generated using Orval:

fetchers.ts - Contains all API endpoints
fetchers.schemas.ts - Contains all Typescript models

src/App

Contains the main application component, which contains the sub components and the routing.

src/pages and src/components

The folder /src contains two main folders for our components. It contains /pages and /components. The /pages folder contains the main files for specific pages. The /components folder contains the universal components. When a component is page specific we place it in the specific /pages/page folder, to not further clutter the /components folder.

Every component sits in its own folder with the name of the component. In the folder there are at least two files:

index.ts - importing the ComponentName.tsx and exporting it
ComponentName.tsx - Containing the component code

The reason for this approach is so that we can organize our code (and if needed it’s tests) in folders, import from the folder name and not end up with multiple index.ts filenames in our code editor.

src/constants

This folder contains the constants for our dimensions and

src/css

For our styling we use Tailwind combined with Sass. The CSS folder contains our styles.scss, tailwind.css and tailwind.src.css files. In our tailwind.src.css we define our custom classes which we apply tailwind classes on.

Every component is styled with Tailwind classes, much like Styled Components, but only then with utilities classes.

For when we need to apply specific styling to an element (e.g. calculating a specific width/height for an element) we create a custom class that we style in our styles.scss Sass file.

src/utils

Contains functions that are used in different components.

src/hooks

Contains hooks that are used in different components.

src/images

Contains the images that we use in the front-end, like the Provincie Zuid-Holland logo.

Testing

Static testing is done via ES Lint. Unit and integration testing is done with Jest and React Testing Library. The API calls are mocked with Mock Service Worker. The MSW handlers can be found in the /src/mocks folder. The mock response data can be found in the /src/mocks/data folder.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_Coen 🎨 🖋 📓 ️️️️♿️	_{Aiden Buis} 💻 ️️️️♿️ ⚠️ 📖	_Paulien-Wan ⚠️	_JasonKAEC 💻 ️️️️♿️ ⚠️ 📖	_HagenaarC 💼
_{Eric Herman} 🧑‍🏫	_{Bernard Vuijk} 📆	_Erik 🚧 🖋 📓	_{Swen Mulderij} 💻	_Kingmar1 💻
_ReadMarten 💼	_{Stef Winterswijk} 💻 📖 ️️️️♿️ ⚠️