POC: Frontend Deployment from CLI

These steps will enable you to deploy a barebones React application to an S3 bucket, assuming you have your own S3 account. This approach is NOT recommended for production deployments – it's simply intended to demonstrate that it's possible to put React on the internet.

  1. Create a new S3 bucket:
  2. Grant public read access:
  3. Under Properties, enable Static Website Hosting:
  4. Under "index document", enter index.html and save. Make note of the url listed under "Endpoint" – this is the URL from which you'll access your website.
  5. Under Permissions > Bucket Policy, enter the following. Replace YOUR_BUCKET_NAME with your bucket name:

    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "AddPerm",
                "Effect": "Allow",
                "Principal": "*",
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
            }
        ]
    }
  6. Back on your local machine, make sure you have the aws cli client installed and set up with credentials for your aws account.
  7. You're done with the S3 part. Yeehaw!
  8. On your local machine, make sure you have Node 8 installed and create-edx-react-app set up. Follow the instructions at the links.

  9. Run create-edx-react-app and follow the prompts to generate a new example frontend application.
  10. Navigate into the root folder of your new application, install the required modules, and build for production:

    $ cd poc-deployments
    $ npm i
    $ npm run build
  11. Run the following to sync your built assets in the dist folder to your new bucket. Replace YOUR_BUCKET_NAME with your bucket name.

    $ aws s3 sync dist/ s3://YOUR_BUCKET_NAME
  12. In your browser, enter the endpoint URL from step 4:
  13. Behold the glory of the cookiecutter on the open internet.