RACTF Shell

Installation

ractf/shell operates as a static single-page app. This means that you will require a separate web server to serve files - nginx or apache will usually do the job. The sole dependencies for building the app are Node.js and pnpm, this installation of which widely ranges between distributions. See here for more details on that, ensuring you read about pnpm env. Using pnpm is identical to npm in almost every way, but your disk space will thank you when working with multiple projects that use npm packages.

On some systems, some packages require you to use Node.js 14. Please refer to my earlier mention of pnpm env, and run pnpm env use 14 --global (only global is supported as of the time of writing) or use your usual node version manager (eg nvm).

You need to use the --shamefully-hoist flag when installing dependencies because some of the dependency developers do not know how to write good code.

As this project contains submodules, cloning should be performed with the command:

git clone --recursive https://github.com/ractf/shell

Before we can build, there are a few settings we need to change. In the .env.production file the REACT_APP_WSS_URL variable should be changed to the websocket location of the backend. This is typically wss://[domain]/api/v2/ws. You may also wish to change REACT_APP_SENTRY_DSN to point to a Sentry DSN. Additionally, if you would like to use Google Analytics, set the REACT_APP_GA_UA variable.

The site will create a copy of itself in players' browsers to allow it to operate offline and to decrease load times. This is often ideal, however if you plan to make many frequent edits to the site the experience of "updating" the web app may not lead to the best user experience. This caching can be disabled by setting the ENABLE_SERVICE_WORKER variable to false in src/index.js.

A basic build can now be performed with the following commands:

cd shell
ppm i --shamefully-hoist
pnpm run build

You can now either serve the ./build directory directly (not recommended) or copy its contents into a directory the web server is serving from. /var/www/ractf/ is a good choice for this.

It is recommended that you set a very long cache time on the served files, as there will always be a unique mapping between the URL a file is stored at, and the content of the file, even when updating or editing the site.