User interface for the City of Turku varaamo.turku.fi resource reservation service. Uses the respa API.
- node
>=18.14.2
| Suggestion:18.14.2
- npm
>=6.14
| Suggestion:6.14.16
- yarn Optional, if
yarn
is not included as part of your current node version.npm
can be used.
- Redux handles the state management of the app. For more info check their awesome docs.
- React handles the rendering of the 'views'.
- react-redux is used to connect the Redux Store to React components.
- react-router handles the routing of the app.
- reselect is used for getting data from Redux Store and manipulating it to be better usable in React components.
- redux-api-middleware is used to interact with the API.
- The application is run on an express server.
- Uses redux-oidc for authentication.
- webpack takes modules with dependencies and generates static assets representing those modules.
- Babel transforms JavaScript written in ES2015 and JSX syntax to regular JavaScript.
-
Check if Docker and docker CLI installed, port
3000
is free, not occupied by running server. -
Make sure you have env variables in
.env
, otherwise extend it from example by:$ cp .env.example .env
-
Start building docker image and start container:
$ docker compose -f docker-compose.yml -f docker-compose.dev.yml up
-
Open
localhost:3000
on browser when Webpack bundling is ready.
Starting production server works in the same way as starting a development server with these exceptions:
-
Production default port is
8080
-
Starting production server with docker compose:
$ docker compose -f docker-compose.yml -f docker-compose.prod.yml up
Follow the instructions below to set up the development environment.
By default the running app can be found at localhost:3000
.
-
Install npm dependencies:
$ npm install
-
Make sure you have the following env variables set in an .env file in the root of the project: Run command:
$ cp .env.example .env
OR prepare .env with default content:
CLIENT_ID OPENID_AUDIENCE OPENID_AUTHORITY API_URL ADMIN_URL THEME_PKG APP_TIMEZONE
Environment's variable guideline:
-
API_URL
: Custom config to replace global application's api URL. Expected value is valid URL string. -
ADMIN_URL
: Custom config to replace global application's admin respa URL. Expected value is valid URL string. -
THEME_PKG
: Custom config to override global application's styling and texts. Expected value is a valid string that is the name of the theme package, e.g.THEME_PMG='varaamo-theme'
. Default styles and texts will be used if not set. -
BLOCK_SEARCH_ENGINE_INDEXING
: Adding this setting prevents most search engines from indexing the site. This can be useful for preventing test instances from showing up in search results. -
APP_TIMEZONE
: This config is optional, but it's highly recommended to be set same as Respa's time zone. When a time zone is given e.g.,Europe/Helsinki
, all the times shown for resources, reservations etc. are in given time zone. When this config is not given, Varaamo will use user's local time zone.
-
-
Then, start the development server:
$ npm start
Follow the instructions below to build and start production server.
By default the running app uses port 8080
.
-
Install npm dependencies:
$ npm install
-
Build the production bundle:
$ npm build
-
Make sure you have the required env variables set.
-
Then, start the production server:
$ npm start:production
-
Run tests:
$ npm test
-
Run tests in watch mode:
$ npm test:watch
-
Run tests with coverage:
$ npm test:coverage
-
To check the code for linting errors:
$ npm lint
-
To automate fixing lint:
$ npm lint:fix
OR enable eslint --fix
onSave config in your code editor config.
- To rebuild the docker images:
$ docker compose -f docker-compose.yml -f docker-compose.dev.yml up --force-recreate --build
- To enter inside docker container environment:
$ docker compose exec node-app sh
- Remove docker container if needed:
$ docker rm -f <container_name>
- Remove docker image:
$ docker rmi varaamo_node-app
- Running command inside Docker environment:
(Make sure docker container is running)
$ docker compose run node-app YOUR_COMMAND_HERE
- Encounter
node-sass
issue ? try to go inside docker container environment and runnpm rebuild node-sass
The code mostly follows the Airbnb JavaScript Style Guide. All JavaScript should be written in ES2015 syntax. Code is automatically linted with eslint when running unit tests or bundling the app with webpack.
Sass CSS extension language is used to make writing styles nicer. Autoprefixer handles CSS vendor prefixes. Bootstrap is used as the CSS framework for the site and City of Helsinki Bootstrap theme is used as the main theme.
A theme package can be installed to override the default styles and texts. In order to use a theme it must be installed/added locally
and then the env variable THEME_PKG
must be set accordingly THEME_PKG='varaamo-theme'
.
See example for further explanation of how a theme package should look,be structured and what values can be overridden etc.
Installation is the same for both development and production. If the theme package is published to npm/yarn then
this step can be skipped, just remember to set the name of the package as the THEME_PKG='package-name'
.
For ease of use place the theme folder varaamo-theme
next to the varaamo
folder:
/varaamo
/varaamo-theme
and then in the varaamo
project folder run npm install ../varaamo-theme
.
Set THEME_PKG='varaamo-theme'
to env variables.
Install the theme according to the installation instructions and then npm link
the local theme package to
the local varaamo project.
cd ~/projects/varaamo-theme
npm link
cd ~/projects/varaamo
npm link varaamo-theme
- Jest is used for running the tests and for test assertions. Running on Jsdom environment by default, which was a headless browser.
- simple-mock and MockDate are used for mocking and spies.
- Enzyme is used to make testing React Components easier.
All setting was included under .vscode directory.
-
On Chrome: Guideline. Setting was under
Vscode debugger
name -
On Jest test: Guideline. Setting was under
Vscode Jest debugger
name.-
Put breakpoint in test file
(*.spec.js)
-
Run command:
$ yarn test:debug
-
Copyright (c) 2019 City of Turku <http://www.turku.fi/>