A photo gallery web-application for Foton (Photon) at Fysikteknologsektionen (The Physics Division) at Chalmers University of Technology.
Some of the dependencies use external libraries that may have to be built from source if there are no prepackaged versions available for your system. This may require additional build tools.
The project has post-install hooks to install nested dependencies. Simply install all dependencies by running
npm installin the root directory.
Before building or starting a dev server the project has to be configured. This is done by supplying a .env file in the root directory. There is an example configuration file, .env.example, which can be used as a template.
The project uses Google OAuth 2.0 for authenticating users. For this to work you must first create a new project at the Google Cloud Console, then configure the OAuth consent screen and finally create a new OAuth 2.0 client ID (All of this can be found under the APIs & Services tab).
When configuring the OAuth consent screen the profile and email scopes must be included for the application to work. When creating the client ID Authorized JavaScript origins should be set to the top level url, i.e. https://foton.ftek.se and Authorized redirect URIs should be set to the /api/auth/google/callback subdirectory, i.e. https://foton.ftek.se/api/auth/google/callback.
In addition to any domain-restrictions imposed by the OAuth 2.0 client (i.e. if setting it to internal users only), the application uses a regular expression match to check for allowed emails. The regular expression should be set in the .env file.
To build the project for a production environment, run
npm run buildin the root directory. This will compile all typescript and build the react project. It is important to change the NODE_ENV variable in .env to production when running the project in production since sensitive information may otherwise be exposed to clients.
The project has a built in webpack dev-server (with create-react-app) and uses ts-node-dev to run a node dev-server which compiles typescript at run time. These can be started independently from the client and server directories respectively or simultaneously by running
npm run devin the root directory. The webpack server runs on port 3000 by default and is set to proxy requests to port 3001 (see the previous section on how to configure the project).
The project includes a script to generate dummy content for development. This can be run with ts-node-dev, or with node if the project has been built, from the server directory using:
npx ts-node-dev ./src/dev/createDummyAlbums.tsor:
node ./dist/dev/createDummyAlbums.jsrespectively. Note that development packages need to be installed in order to generate dummy content.