How to: Set up a frontend app for sandbox testing using nginx

This how-to describes how to serve your frontend app using nginx on an edX sandbox with a second edX sandbox as it's backend.

Deploy Sandboxes

First, we want to deploy an edX sandbox which will be used to serve your frontend app using the sandbox provisioning job at https://tools-edx-jenkins.edx.org/job/Sandboxes/job/CreateSandbox/build?delay=0sec.

Second, we want to deploy an edX sandbox which will be used as our backend using the sandbox provisioning job at https://tools-edx-jenkins.edx.org/job/Sandboxes/job/CreateSandbox/build?delay=0sec. Be sure to include all of the services you will need for your frontend app (i.e. LMS, Studio, ecommerce, etc.).

Configure Nginx on Frontend Sandbox

We will use the first sandbox to serve your built frontend app using the nginx instance provisioned on the sandbox.

1. Clone your frontend app's git repo on the sandbox.
2. Build your frontend app.
3. Edit /edx/app/nginx/sites-available/lms.
4. Modify the nginx configuration to server your built frontend app from your frontend app's dist directory.

Replace:

location / {
    try_files $uri @proxy_to_lms_app;
}

With:

location / {
    root [path to your frontend app's dist directory];
    try_files /$file =404;
}

Add Frontend Hostname to Configuration on Backend Sandbox

You will need to edit the settings of your backend services on the backend sandbox to allow cross domain requests to be made to them.

• Add your frontend hostname to the CORS_ORIGIN_WHITELIST setting on each of the services you wish to make API requests to.
• Add your frontend hostname to the LOGIN_REDIRECT_WHITELIST setting in /edx/app/edxapp/lms.env.json.
• Restart each of the services for which you modified settings.