Developer Journey Dynamic Web App

Developer Journey App gives developers a fun user interface for exploring a simple maze to find and collect resources that provide technical tips.

The main goal of the app, however, is to showcase how to write Next.js apps to reap the performance benefits of Google Cloud and Cloud CDN.

Launch

Features

This is a demo app built with TypeScript, Next.js and React. The app demonstrates Static Generation and Server-side Rendering techniques for pre-rendering cacheable pages.

This demo runs on Google Cloud using the following services:

• Cloud Run for scalable serverless apps
• Cloud Firestore for scalable serverless databases
• Cloud CDN for scalable content delivery and caching

Getting Started

Prerequisites

To run Dev Journey locally using your own machine, you will need to install the following:

• Node.js (LTS version is recommended)
• Google Cloud CLI
• Firestore Emulator (optional)

Installing the Firestore Emulator for local development is optional. If you don't use the emulator, you will need to create a database on Cloud Firestore that you can use for development and testing.

The Google Cloud Firestore emulator requires a Java 8+ JRE installed and on your system PATH

If you need to install Java, you can get it from here: https://adoptium.net/

• To choose a specific version, to to: https://adoptium.net/temurin/releases/
• If you're on a Mac with an Apple Silicon M1 or M2 chip, choose the aarch64 architecture.
• Choose JRE instead of the full JDK package unless you plan to do Java development.

Run the app locally

1. Start the Firestore Emulator

   Choose the port you want to use for the Firestore Emulator, for example 9999.

   Note: If you choose a port that is not 9999 for this demo, you will need to update the host property in database.ts to match your selected port.

   Export the FIRESTORE_EMULATOR_HOST environment variable:

   export FIRESTORE_EMULATOR_HOST="localhost:9999"

   When the exported FIRESTORE_EMULATOR_HOST environment variable is set, the Firestore client will automatically use it to connect to the emulator.

   To start the emulator:

   gcloud emulators firestore start --host-port="$FIRESTORE_EMULATOR_HOST"

   Press Ctrl-C when you want to stop the Firestore emulator.

2. Get the code

   Clone this repo and change your current working directory to it:

    git clone https://github.com/googlecloudplatform/developer-journey-app.git
    cd developer-journey-app

3. Set local development environment variables

   Copy the example .env.local.example file to a new file .env.local:

   cp .env.local.example .env.local

   This file is used by Next.js to define default development values such as FIREBASE_EMULATOR_HOST. If neccessary, change any of the default values provided.

4. Install npm dependencies:

   npm install

5. Run the development server:

   npm run dev

   Open http://localhost:3000 with your browser to see the result.

   You can start editing the application. The browser auto-refreshes when you save changes.

   The repo's package-lock.json will be ignored by git if you commit changes (configured in .gitignore).

Tests

Before running tests, make sure you have the Firestore Emulator running on your local machine on the indicated port.

To run Jest tests:

FIRESTORE_EMULATOR_HOST="localhost:9999" npm test

To run Jest tests in watch mode:

FIRESTORE_EMULATOR_HOST="localhost:9999" npm run test:watch

ts-jest is installed as a dev dependency to support writing tests in TypeScript. The jest configuration (jest.config.js) sets preset: 'ts-jest' to enable this.

Jest will run tests located in __test__ directories (for example: src/lib/__test__/database.test.ts).

Deployment

For instructions on how to deploy this application to a Google Cloud Project, see the Cloud Architecture Center.

Contributing

See CONTRIBUTING for more information how to get started.

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms. See Code of Conduct for more information.

License

Apache 2.0 - See LICENSE for more information.