The Node Express server folder has been deployed to Render on https://linguistnow.onrender.com/. The React app to Netlify https://linguistnow.netlify.app/dashboard, and the n8n workflow was deployed on my local NAS on https://n8n.nicmart.synology.me/

Prerequisite: set up OAuth2 in Google Cloud console.

We will need to adjust the consent screen settings and credentials to use the production url of our React app eg. https://linguistnow.netlify.app

1. Go to OAuth consent screen https://console.cloud.google.com/apis/credentials/consent

2. Click Edit app button

3. Provide relevant information. For example:

4. Go to credentials screen at https://console.cloud.google.com/apis/credentials and add production URL in Authorized redirect URIs, and Authorized JavaScript origins sections, for example below:

5. Download updated oauth2.keys.json, go to Renders environment variables and edit the secret file, making sure the production url is the first or only one in the list:

6. This file content will be set as secret file when we deploy Render below.

A new Web Service was created on Render, choosing to Build and deploy from a Git repository, and server folder on our repo chosen as the root folder to deploy from.

Added the oauth2.keys.json file as secret file on Render

Render mounts secret files into a special directory at runtime /etc/secrets. To access this directory when deployed, and a different one when running locally, here's how the authController.js code was adjusted to read the oauth2.keys.json file from those different paths.

const fs = require('fs');
const path = require('path');

// Define the possible paths
const localPath = path.join(__dirname, '../config/oauth2.keys.json');
const hostingProviderPath = path.join('/etc/secrets', 'oauth2.keys.json');

// Determine which path to use for OAuth2 configuration from Google Developers Console
const secretFilePath = fs.existsSync(localPath) ? localPath : hostingProviderPath;

console.log(`Using secret file path: ${secretFilePath}`);

const keys = require(secretFilePath);

// Create an oAuth client to authorize the API call.  Secrets are kept in a `keys.json` file,
// which should be downloaded from the Google Developers Console.
const oAuth2Client = new OAuth2Client(
    keys.web.client_id,
    keys.web.client_secret,
    keys.web.redirect_uris[0]
);

The .env variable was copied over to the Environment section on the Render server, per this help guide. Airtable variables were set per install instructions, and the rest from the example.env file.

Then waited 1-2min for Render deployment to complete:

Deploying n8n docker image to local NAS was chosen as I already own a Synology DS218, so running n8n at no additional cost. After installing the image, configured the container and added Synology firewall rules so n8n could access the PostgreSQL db.

Prerequisite: follow n8n steps to configure your workflow.

1. Open your Webhook starting node, toggle to Production URL and copy webhook url

2. Open your Render dashboard again, back to the environment variables section, and add new variable to allow our Node Express server to connect to our n8n workflow, with key N8N_WEBHOOK_URL and value be what you copied in previous step removing /calendar-check so it ends in /webhook

3. Don't forget to click Save Changes button

1. Choose to create new repo https://app.netlify.com/start/repos and select GitHub

2. Select your repo

3. Click Build Settings

4. Set Base directory field to client

5. Change the "Build command" to CI=false npm run build (to ignore any warnings in the code)

6. Set Publish directory field to client/build

7. Click Add environment variables button

8. Create 4 keys below:

• Create key REACT_APP_BASE_URL and set value to your published Netlify site. eg. https://linguistnow.netlify.app

• Create keys REACT_APP_GOOGLE_CLIENT_ID and REACT_APP_GOOGLE_CLIENT_SECRET with values from the Google OAuth2 credentials you set up.

• Create key REACT_APP_API_URL and set value to deployed Render server without trailing (eg. https://linguistnow.onrender.com). Make sure to remove trailing forward slash.

9. Click the Deploy to Netlify button

10. Change app name in your site configuration under https://app.netlify.com/sites and enjoy eg. https://linguistnow.netlify.app/