- Clone the repo
- Set the Environment variables based on
.env.example
- Run
yarn
- Run
yarn dev
- Open the controller and display in your browser at
http://localhost:3000
andhttp://localhost:3000/display
- ????
- Create a PR
- Profit
When a PR is merged to master it's automatically deployed to https://reaktor-tetris-staging.herokuapp.com/. Master is deployed manually via Heroku to https://reaktor-retris-production.herokuapp.com/. To access the apps you'll need access. Joonas (@aki7) can help you with this.
Clientside bugtracking uses a free version of Bugsnag. Currently Joonas and Ákos has access to the collected data. Ask them to get access.
When you're running yarn pretty
and you save a file in your editor it's automatically formatted with prettier
to match the lint rules. Imports aren't organised automatically by yarn pretty
. That you'll need to do on your own.
Currently Google Spreadsheet based custom translation is offered.
- Open
src/i18n/default-translation.ts
- Fill an empty Google Spreadsheet's first column with the default translation keys
- Add your translations to the second column
- Make your Sheet publicly available (readable)
- Go to https://console.cloud.google.com/apis/library/sheets.googleapis.com and generate an API key
- When starting the application provide the following environment variables (you can use
.env
too):
SHEETS_API_KEY
: Your generated API keyTRANSLATION_SPREADSHEET_ID
: https://docs.google.com/spreadsheets/d/`TRANSLATION_SPREADSHEET_ID`/edit#gid=0TRANSLATION_SHEET_NAME
: The name of the Sheet which can be found on the lowest part of the Spreadsheet page (by default it isSheet1
)
- If the environment variables are provided, the app will try to download and merge the Spreadsheet translations into the defaults on each page load.
Check out the following sheet for an example structure: https://docs.google.com/spreadsheets/d/1KNi3vxCagcMp0x7dFKfo_CnIkWMaCwHadRPwuz23xm8/edit#gid=0
Some config env vars are used by the frontend, like Google Analytics tracking ID. This is separated into a client-config.ts
file, as we want to avoid exposing sensitive configurations.
If you'd like to add additional env config that is visible to the client, you'll also have to include the variable in the next.config.js
file's new webpack.EnvironmentPlugin
object, so that it is injected into the frontend code during build time.