Dapla Ctrl

A web interface for performing administrative tasks related to Dapla teams.

Report Bug · Request Feature

About The Project

A web interface for performing administrative tasks related to Dapla teams which supports things like displaying Dapla team members, adding team members and creating new teams.

Developing

In Dapla Ctrl we use effect as the standard library for typescript as it bring with it some powerful primitives for managing asynchrounous effects in a sane way with strong observability support. Furthermore, it provides schema validation for data and a complete set of funmany handy utilityctions for manipulating data in an immutable manner. Prefer writing in a functional style using effect when developing Dapla Ctrl.

Setup

1. Clone the repo using tools like git clone or gh repo clone.
2. Navigate into the repository root directory

   cd dapla-ctrl

3. Start the Nix development environment

   nix develop

4. Install PNPM packages

   pnpm install

5. Start the development server and access the application at http://localhost:3000

   pnpm run dev

Note about local development

Dapla Ctrl assumes all requests include an authorization header when sending requests to the API. Therefore, when developing locally you will need to have a browser plugin that modifies the header with your bearer token. For example you can use header editor for firefox. Add a new rule which matches the URL for the development server and add an authorization header with Bearer <token>, don't forget the space between "Bearer" and the token.

Tips

You can use direnv to automatically hook into your nix shell environment when cding into the project's root directory. There also exists plugins like direnv for vscode for code editors to hook into this environment as well.

If you don't want to use the Nix development environment you have to follow these extra manual steps:

• Install nodemon (required to run the development server)

  pnpm add -g nodemon

• Set environment variables needed by the application:

  touch .env.local && printf 'DAPLA_TEAM_API_URL=https://dapla-team-api.intern.test.ssb.no\nPORT=3000\nDAPLA_CTRL_ADMIN_GROUPS=dapla-stat-developers,dapla-skyinfra-developers,dapla-utvik-developers\nDAPLA_CTRL_DOCUMENTATION_URL=https://statistics-norway.atlassian.net/wiki/x/EYC24g' >> .env.local

ESLint and Prettier

For ensuring code consistency and adhering to coding standards, our project utilizes ESLint and Prettier. To view linting warnings and errors in the console, it's recommended to run the following script during development:

pnpm run lint

To automatically fix linting and formatting issues across all files, you can use the following scripts (Note: While these scripts resolve many ESLint warnings or errors, some issues may require manual intervention):

pnpm run lint:fix && pnpm run lint:format

IDE Support

For seamless integration with popular IDEs such as Visual Studio Code and IntelliJ, consider installing the following plugins:

Visual Studio Code

1. ESLint: Install the ESLint extension to enable real-time linting and error highlighting. ESLint Extension

2. Prettier: Enhance code formatting by installing the Prettier extension. Prettier Extension

IntelliJ

1. ESLint: Install the ESLint plugin to enable ESLint integration within IntelliJ. ESLint Plugin

2. Prettier: Integrate Prettier for code formatting by installing the Prettier plugin. Prettier Plugin

By incorporating these plugins into your development environment, you can take full advantage of ESLint and Prettier to maintain code quality and consistent formatting throughout your project.

(back to top)