An application that presents information about employees and customers at Knowit Objectnet, based on data gathered by the "Dataplattform" project.
This is a monorepo, containing the following apps
:
Web:
A SPA (single page application) application built with React.js, that fetches and presents data from the Node.js / Express server (see below). The code for this web app is located under apps/web. The web app is bootstrapped and built using Create React App.
Server:
Node.js and Express a server that acts as the middleman between the web app and AWS. It fetches and aggregates data from the "Dataplattform" API. The code for this server is located under apps/server. Read more about how the server fetches and serves data.
In addition to the two apps
, there are packages
containing shared code and config utilized in the apps
.
engines.node
field in package.json
.It is recommended to use a version manager like
nvm
if you need to use multiple versions of Node on your computer.
engines.yarn
field in package.json
. A binary file to Yarn 3.2.0
is included, so it should be sufficient to just run yarn install
.Before first launch, or whenever dependencies are changed, run the yarn install
command in the root of the project. That will bootstrap and hoist all the dependencies.
It is also necessary to add a variable to the .env file under ./apps/web.
REACT_APP_ENV=development
When developing locally, there are two options on how to run the application:
This option allows you to work on both the web and server part of the application. The web will fetch data from the locally running server.
.env
file for the server.yarn server:dev:local
and yarn web:dev:local
.You can use this option if you don't need to make changes to the server app. The web will
fetch data from the proxy
URL set in apps/web/package.json
.
yarn web:dev
in the root folder of the project.To begin with, your account is not authorized to fetch data. No data will appear on the page, and you may
see internal server error
or unauthorized
errors in the
console. To fix this, do as described here
.
When running locally, Create React App uses a proxy URL to redirect requests from the web to the server.
See apps/web/src/setupProxy.js
and this guide for details.
dev
): https://dev.folk.knowit.no/prod
): https://folk.knowit.no/The project is set up with continuous deployment using GitHub Actions
and Serverless. The action configurations are located in
the .github
folder, and the Serverless configuration in serverless.yml.
Runs automatically on every merge to the master
branch. Usually, this is the result of merging a pull request from a feature branch (or other type of working branch).
Runs automatically when a new GitHub release is created. Please refer to this guide on how to create a new release.
Note that this should not be necessary, except in rare cases.
# Deploy server and infrastructure
yarn server:deploy:dev
# Deploy web
yarn web:build # to create a build
yarn web:deploy:dev # to deploy the build
To ensure consistent code style, similar conventions and matching formatting, ESLint and Prettier is used.
It is recommended to use ESLint and Prettier plugins for your IDE. This allows having syntax error highlighting and automatic code reformatting. For those using VSCode, certain extensions and settings are recommended automatically.
There is a pre-commit hook running (using husky) before code can be committed, and it will not allow commits with convention/format/code style-breaking code. This ensures that no pull requests are cluttered with significant amounts of whitespace-changes, line breaks and so forth.
When the web requests data from the server, the server connects to the Dataplattform API and fetches data from so-called "reports" . You can read more about reports here, including how you can create your own. The server then aggregates the data from the report(s) before it is sent as a response to the web.