Sulfuron guilds portal

🔗 https://guildes.sulfuron.eu/

🧰 Stack

• Dependencies management with Yarn
• Static site using Nuxt
• Hosting, Functions, Auth, and Firestore from Firebase
• CSS utilities from TailwindCSS
• SVG icons from heroicons
• Testing with Jest and Vue Test Utils (with Babel)
• Error monitoring with Sentry
• Analytics with Amplitude

Node versions

• Front-end website is built with Node.js v12.x (cf. .nvmrc)
• Firebase functions running on Node.js v12.x (cf. engines.node in functions/package.json)

🚧 Development setup

Nuxt environment

Copy .env.example as .env and edit its values. These environment variables are used by the Nuxt app at build time.

• Sentry: https://sentry.io/settings/account/api/auth-tokens/

Firebase Functions

Copy functions/.runtimeconfig.example.json as functions/.runtimeconfig.json and edit its values. These environment variables are used by the Firebase Functions at runtime.

Then, download the Service Account to enable connecting in local and place it at functions/.service-account.json. The file is available in your Firebase console project settings.

• Battle.net credentials: https://develop.battle.net/access/clients/

Amplitude (Node.js)

Update the local ampli.json and ampli wrapper by running:

cd functions
ampli pull --path=./src/services/analytics/ampli

Running the apps

⚠️ As of today, Firebase Auth emulator encounters issues when trying to generate custom tokens with firebase-admin, so we're not using it in local.

Install the project dependencies using the following command:

# Clone the repository
git clone https://github.com/Strift/sulfuron-guilds.git
# Install the dependencies
cd sulfuron-guilds
yarn
# Run the Nuxt app
yarn dev
# Run the Firebase emulators
yarn serve --only hosting,functions,firestore

⚠️ Using the Firebase Auth emulator creates client-side errors that prevents proper rendering of the page in non-incognito mode. 🤔

🧪 Testing

Run the tests using the following command:

yarn test

This commands just runs Jest, so you can use any Jest CLI flags like --watch.

Tests that involves browser locale (to format dates) require full-icu to be installed.

Unresolved: Jest has issues with loading .ts files if extensions are not specified.

🚀 Production

Build

.env file is not used for production build, all production values are currently hard-coded in nuxt.config.js.

Build the static website using the following command:

yarn generate

Deployment

Deploy the project to firebase using the following command:

yarn deploy

When only deploying the Nuxt app, use the following command to decrease the deployment time:

yarn deploy --only hosting

When deploying the Firebase Functions, make sure to update the production runtime environment using when necessary.

firebase functions:config:set \
  hosting.app='https://guildes.sulfuron.eu/' \
  hosting.auth_function='https://us-central1-sulfuron-guilds.cloudfunctions.net/auth' \
  battlenet.client_secret='bnet app client secret code' \
  battlenet.client_id='bnet app client ID'