edx-marketing-site-frontend

Prototype for server-side rendering of the edX.org marketing site.

Development

Install all dependencies:

$ npm install

Run Webpack in watch mode:

$ npm run watch

Run the webserver:

$ npm start

Deployment

Static assets are compiled by Webpack and pushed to S3. Application code is deployed to AWS API Gateway + Lambda (server code) using ClaudiaJS. Additionally, CloudFront sits in front of API Gateway and S3 to facilitate caching and routing for a single domain.

NOTE: The steps below assume you have manually setup CloudFront. I did this manually since I have limited experience with CloudFront and was unaware of how easy it is to use the SDK. In the future, this setup should be scripted using either the JavaScript SDK or Terraform (preferred by edX).

Initial setup

1. Take a moment to read https://claudiajs.com/tutorials/installing.html. Pay special attention to the section regarding configuring credentials.

2. Delete the existing claudia.json file. It's useless for anyone except me (clintonb).

3. Create a new proxy API:

    $ AWS_PROFILE=claudia ./node_modules/.bin/claudia create --region us-east-1 --deploy-proxy-api --handler lambda.handler
   

Subsequent deployments

A script can be run to handle subsequent deployments. This script does the following:

1. Compile translations

2. Run Webpack to build static assets, and push them to S3

3. Deploy updated code to Lambda.

4. Invalidate CloudFront paths, except /static (which doesn't need to be invalidated since asset file names contain a hash for cache busting).

   $ npm run deploy

Scheduled Event

Scheduled events can be created in CloudWatch to periodically poll the Lambda to prevent cold starts. The command below will create a new scheduled event that makes a GET request to the health endpoint (/health) every 15 minutes.

$ AWS_PROFILE=claudia ./node_modules/.bin/claudia add-scheduled-event --event ./schedule.json --name warmer --schedule "rate(15 minutes)"

Internationalization (i18n)

Translations are managed with i18n-abide. This package is responsible for extracting and compiling translations.

Note #1: Translations are only used server-side. If client-side translations are needed, the translation files will need to be pushed client-side.

Note #2: We call jsxgettext directly instead of using extract-pot due to a bug in the current version of i18n-abide.

Setup: Install gettext

$ brew install gettext
$ brew link gettext --force

Setup: Install the Transifex client

The Transifex client is based in Python. You should create a virtual environment to install it.

$ pip install -r requirements.txt

Update Translations

This command will extract new strings from the codebase, pull updated translations from Transifex, and compile them all.

$ npm run update-translations 

Push updated source strings to Transifex

$ npm run push-translations