Description

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.

🧪 Preview: This app is currently under development.

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

Clone this repo and change directory (cd) to it.

Install dependencies:

npm install

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

Run the development server:

npm run dev

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

You can start editing pages. The browser auto-updates when you save changes.

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"

Start the emulator:

gcloud emulators firestore start --host-port="$FIRESTORE_EMULATOR_HOST" --project=demo-test

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

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

For more detail, see the docs for Emulate Firestore locally.

npm test
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).

You need a Google Cloud account if you want to open the demo in Cloud Shell (a free online development and operations environment with an integrated editor) and deploy it.

If you want to explore the developer experience using your own machine, you will need to install the Google Cloud CLI.

While testing the app you can connect to a hosted Cloud Firestore database or you can run the [Firebase Emulator].

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

You can sign up here.

Once you have an account, you'll have access to the following:

• Free Trial
• Free Tier

The Free Trial provides $300 of Cloud Billing credits to pay for resources for 90 days while you try out Google Cloud.

The Free Tier provides access to Google Cloud products for free beyond the length of the Free Trial period as long as you stay below the Free Tier limits.

If you're using the Free Trial, Google creates a billing account for you and credits $300 to your account.

Once your Free Trial ends, you can continue to use the Free Tier, but you'll still need to enable a billing account.

You can skip this if you choose to open this project in Google Cloud Shell. The CLI is already installed.

If you want to work locally, you'll need to install the gcloud tool. If you're on macOS you can also install gcloud via homebrew. Once the installation is done, run gcloud init to set up your environment. More information can be found in the docs.

In case your gcloud cli is outdated, you can update it running:

gcloud components update

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.

gcloud components install cloud-firestore-emulator
# or if already installed:
# gcloud components update

You will need databases for development, testing, staging, and production.

TODO

• provisioning
• configuring app environment

https://console.cloud.google.com/firestore/databases/-default-/data/panel

You can deploy this application to Google Cloud using the Terraform configuration hosted on GoogleCloudPlatform/terraform-dynamic-webapp. There are two ways to do that:

The Google Cloud Solutions Catalog offers one-click deployments of Jump Start Solutions. The dynamic JavaScript webapp solution will deploy the following resources with the latest build of the Developer Journey application:

• Cloud Run service
• HTTP loadbalancer with an ephemeral IP address
• A Firestore database
• A Google Cloud Storage bucket

1. Clone the GoogleCloudPlatform/terraform-dynamic-webapp repo and change your current working directory to the repo's infra directory:

   git clone https://github.com/GoogleCloudPlatform/terraform-dynamic-javascript-webapp.git && \
   cd terraform-dynamic-javascript-webapp/infra
   

2. Run terraform init and plan
3. Run terraform apply

In order to setup and explore a CICD pipeline, first make sure to deploy this app to Google Cloud

1. Fork this repo The CICD pipeline demonstrated with this application requires that you connect a GitHub repository to the Google Cloud project you deployed your infrastructure to. Follow instructions for forking a repo here.

2. Deploy resources using Terraform

From the infra/environments/prod directory of your forked project, deploy resources using terraform:

terraform init && terraform apply

You will be prompted to provide values for some required variables.

3. Using the pipeline

Make a change to a file in the src directory of your forked repository. When a change is merged on the main branch, navigate to the Cloud Build History page to observe the pipeline in action.

Contributions to this library are always welcome and highly encouraged.

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.

Apache 2.0 - See LICENSE for more information.