Misakey is the user account solution for people and applications who value privacy and simplicity. And it’s open source.
This project is the frontend repository of Misakey.
You can find more info about Misakey in our website and our about page.
On this README you will only find technical information about the frontend code. For more global information about Misakey, the contribution guide, the community, the licensing philosophy or a more global overview of the project, please go on the README of the backend monorepo.
This project contains the source code of the Misakey webapp.
The webapp is based on CRA.
To make the project run, you'll need a working NodeJS environment, we highly recommend LTS version or higher.
You'll probably need a Docker and docker-compose environment.
We use Yarn as our package manager
You can create a development docker image with the Dockerfile.dev
. It'll start a dev server
you can work on.
You can create a production image with the command make build
To make the CI lighter and don't use too much ressources in our docker images, we're building a base image used by the CI and to build the production image of the app that contains the npm dependencies of the app.
This mean that if you want to add some dependencies to the project you have to update this base image.
VERSION=vX.Y make build-base
will build a new image base. Once you tested it locally(testing image locally) (with a make build
),
you can publish it with a VERSION=vX.Y make deploy-base
.
Aside from building the image (and deploying it) with a new version (incremented from latest image version), you should update the used version in two files:
.gitlab-ci.yml
: set theBASE_IMAGE_VERSION
env var to your new versionDockerfile
: set theBASE_IMAGE_VERSION
env var to your new version
Once you built a new image base, run make build
on frontend project to generate a local docker image.
At the end of make build
, you should see something like:
Successfully built [COMMIT_ID]
Successfully tagged registry.misakey.dev/misakey/frontend:[BUILD_TAG]
In test&run
, in your .env
, set FRONTEND_TAG=[BUILD_TAG]
, then run make application
.
App should then run as expected, but with a prod env config AND your new frontend-base
build.
- /devtools: contains some tools useful for the developers.
- /helm: contains deployment material
- /public: contains the public part of the app (html files, static resources, locales for XHR loading)
- /scripts: contains scripts used by the CI and other tools
- /src: contains the sources of the app
You'll find a specific README in every important folder.
We use Styleguidist for creating a component library documentation.
We use React App Rewired to be able to add some config over CRA.
The config for the webapp is config-overrides.js
. It contains config to make the packages
usable in the app directly.
Locale file organization:
- in
public/locales
we have one locale file per workspace (account
,boxes
). Those translation files are loaded by XHR request. We did that to optimize the size of loaded locales. - in
src/constants/locales
we have all common locales, they are loaded everywhere in the app.fields
: for all fields translations. It only contains translation used by Field componentcommons
: for transversal non component-specific translation (little words, HTTP error codes, inter-workspace infos)components
: For components specific translations (drawer, appbar, ...). Only for components that are not workspace specific
# Lint
make lint
# Tests
make test
A pre-commit hook is available to automatically run the linter before any commit (this way we can avoid "lint" commits)
To install it go to the devtools/git
folder and run ./pre-commit-install.sh
We had some troubles with the GitlabCI (pipelines that take 30min, many crashes, ...).
Here some info we got to try to make it better:
- Adding policy to cache, to only push it in first stage and only pull it after
- Increase yarn timeout, because CI server can be overloaded, so with a reduced bandwidth
Other improvement possibilities for later:
- Using MinIO for having a shared cache (blog article)
- Followup this Gitlab issue
- Followup of Gitlab workspaces for CI
The code is published under AGPLv3. More info in the LICENSE file.
Misakey uses GitLab for the development of its free softwares. Our Github repositories are only mirrors. If you want to work with us, fork us on gitlab.com (no registration needed, you can sign in with your Github account)
This distribution and associated services include cryptographic software. The country in which you currently reside may have restrictions on the import, possession, use, and/or re-export to another country, of encryption software. BEFORE using any encryption software, please check your country's laws, regulations and policies concerning the import, possession, or use, and re-export of encryption software, to see if this is permitted. See http://www.wassenaar.org/ for more information.