Frontend browser UI for Karmen bootstrapped with react-scripts.
It is possible to run this as a standalone app, but since you need the backend as well, it is
recommended to run the whole bundle with docker-compose as described in the global README.
npm install
echo 'window.env = {BACKEND_BASE: "http://localhost:8000/api/2"};' > public/env.js
# (for the first time or if you changed styles)
npm rebuild node-sass
npm startVisit http://localhost:3000.
To make the code more readable, apply the automatic formatting by running npm run lint -- --fix.
Do you need more icons? We are using IcoMoon. To add more icons to the project:
- Visit the IcoMoon app
- Click Untitled Project (or Manage Projects)
- Use the Import project and upload the selection.json file
- Load the project
- Use the search function to add more icons. Try to keep the style consistent.
- When you are happy, select Generate Font and then download the zip file.
- Copy everything except
demo-files,Read Me.txtanddemo.htmlintosrc/assets/icons. The git diff should now show the added icons instyle.css. - Use your new icon like
<i className="icon-new"></i>.
docker build --build-arg REACT_APP_GIT_REV=`git rev-parse --short HEAD` -t fragaria/karmen-frontend .
docker run -p 3000:9765 -e ENV=develop fragaria/karmen-frontendYou can control the exposed interface and port with the following environment variables. This is useful when container is run in the docker's networking host mode.
SERVICE_HOST- Interface on which the proxy will be exposed, defaults to0.0.0.0.SERVICE_PORT- Port on which the proxy will be exposed, defaults to9766
There are problems with compiling the app directly for arm/v7 architecture, so the resulting docker image
is Dockerfile.serve serving a JS bundle compiled with Dockerfile.build. The Dockerfile is used
for development only.
Since all of the operations require a valid JWT tied to a user account, you have to go through a login screen every time you want to access the application. The JWT's are stored in your browser, however, and you will be automatically logged in if you come back within 30 days.
If you want a more permanent setup, for example for a monitoring dashboard, create an API token that has
no expiration date. You can then run the app with the token query param such as:
http://karmen.local?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9......
If no valid user session is detected, the token gets consumed by the frontend app and is remembered by the browser until you press the logout button.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent