41 lines
2.0 KiB
Markdown
41 lines
2.0 KiB
Markdown
# 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`](https://github.com/bjerkio/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](https://github.com/koajs/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` |