This project is a single page application inteded to provide a web client for the Journal de bord project. It is developed using React and TypeScript.
You should install Node.js and npm.
> sudo apt install npm
> sudo apt install nodejsThe project documentation can be found here. Note that you can find the documentation concerning this partical repository in the frontend section.
This web client is published on Netlify. This section focuses on this platform. The configuration is easy. Netlify documentation explains how it is done right here.
# Clone or download the project
git clone https://github.com/Lofaloa/journal-de-bord-spa.git
# Be sure to set your working directory to the project root
cd journal-de-bord-spa
# .env.example is an existing template for the .env file. The variables are
# required for the project to run
cp .env.example .env
# Edit the .env file and set the variables values
vi .env
# Intall dependencies
npm install
# And run it!
npm start
REACT_APP_AUTH_SERVER__URI: is the root URI of the authorization server.REACT_APP_CLIENT_ID: is the identifier of this web client registered in your authorization server.REACT_APP_AUTH_SERVER_TOKEN_URI: is the authorization server endpoint that provide this client with an access token.REACT_APP_AUTH_SERVER_LOGIN_URI: is the authorization server endpoint that provide this client with a login page.
The custom environment variables are set following the React documentation. Their value can be accessed as follows process.env["VARIABLE_NAME"].
This example can be used with a Keycloak authorization server. This is currently the only server that was tested with the application.
REACT_APP_AUTH_SERVER_URI=https://authorization-server.com/auth/realms/realmname
REACT_APP_RESOURCE_SERVER_URI=https://resource-server.com/
REACT_APP_CLIENT_ID=my-local-application-client-id
REACT_APP_AUTH_SERVER_LOGIN_URI=https://authorization-server.com/auth/realms/realmname/protocol/openid-connect/auth
REACT_APP_AUTH_SERVER_REGISTER_URI=https://authorization-server.com/auth/realms/realmname/protocol/openid-connect/registrations
This web client is published on Netlify. This section focuses on this platform. The configuration is easy. Netlify documentation explains how it is done right here.
Netlify explains how to publish on this tutorial. Currently the project is automatically deployed on Netlify when a branch is merged to the master. I still need to configure the environment variables manually.
To set the variables (as described in the previous section), go to:
- Go to app.netlify.com
- Open the site to set the variables for
- Go to Site Settings
- Go to the Build & Deploy section
- Go to Environment
You should find this following screen. There you go 😁! Go ahead and set the required environment variables.
The single page application needs to access a custom resource server on behalf of its users. The authorization server is using Keycloak. Different options exist as to how to implement a OpenID Connect client.
This project used the second. It is the most practical one.
10/07/2020