Guide 2

Note: All terminal commands shown below are assumed to be run from the project root, unless stated otherwise.

Setup

1. Make sure you are using Node 16 or above:

nvm install 16 && nvm use 16

2. Add the Font Awesome auth token to your environment:

Run the following two commands in your terminal, replacing FONT-AWESOME-PACKAGE-TOKEN with the token in this file:

npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" FONT-AWESOME-PACKAGE-TOKEN

This will allow you to install the Font Awesome Pro modules in the next step. See the FA docs for more info.

3. Install the dependencies:

pnpm should be used to install all dependencies except for those in apps/graphql (this directory uses code that relies on Node 14, which pnpm does not support):

pnpm --filter=\!graphql-whatsnew install && 
cd apps/graphql && 
npm install

4. Add the environment variables: Copy the contents of this Drive file to a new .env inside apps/guide.

Development Server

1. Start the GraphQL server on http://localhost:5000:

cd apps/graphql && 
npm run start

2. In another terminal, start Vite on http://localhost:3000:

pnpm --filter guide dev

Production

Build the application for production:

pnpm --filter guide build

Locally preview production build:

pnpm --filter guide preview

Hoisting Dependencies

Some Node packages may have phantom dependencies that are incompatible with pnpm. If you encounter a random error after installing a new package, you can try hoisting it by adding a public-hoist-pattern setting to .npmrc:

shared-workspace-lockfile=false
public-hoist-pattern[]=@vue/reactivity
public-hoist-pattern[]=@vue/runtime-core
public-hoist-pattern[]=@vue/runtime-dom
public-hoist-pattern[]=@vue/shared
public-hoist-pattern[]=nuxt
# ...

Read more

Resources

• Confluence documentation
• Nuxt 3 documentation
• Nuxt 3 deployment
• Nuxt 3 authentication example (the auth flow of this app is based on this project)