Novox Photos manager

Client - Photos react app

App structure

• React application with a public facing website (./public) and an administration panel (./private)
• React router is split into <PublicRoutes /> and <PrivateRoutes />
• <PrivateRoutes /> is wrapped in the <Keycloak> context provider
• The <Keyclock> context provider is created using the AuthProvider from the oidc-react package
• AutoSignin is explicitly set to false to prevent the website from always trying to log in (even if not trying to access the admin section)
• The <AdminLayout> component handles the authentication only rendering the <Outlet> when the user is logged in and has sufficient permissions (role based)
• We can access the user info using the useAuth hook, only possible in React components or hooks
• Our privateApi service is provided using the usePrivateApi hook, it makes use of the useAuth hook to set the authorization header
• The url for the private api is set using a “environment variable” (see build process)

Build process

• The build process is quite simple and uses react-scripts build
• “Environment variables” can be set in the .env file. Before starting the application run ./scripts/env.sh to create an env-config.js file in the./public folder which is then loaded using a <script> tag in index.html
• In our docker setup, we can pass the environment variables in our docker-compose. When starting the container the env.sh script is executed before starting the application

Server - Photos node api

App structure

• We use Koa to setup our web api
• Our api is split into a /api/public and /api/private routes (see the 2 routers)
• Router and HttpEndpoint types can be used to add new endpoints
• Following middleware is provided:
  • JWT token validation
  • Request/response logging
  • CORS
  • Error handling
  • @koa/multer to handle file uploads using multipart/form-data