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.
- Create a new S3 bucket:
- Grant public read access:
- Under Properties, enable Static Website Hosting:
- 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.
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/*" } ] }
- Back on your local machine, make sure you have the aws cli client installed and set up with credentials for your aws account.
- You're done with the S3 part. Yeehaw!
On your local machine, make sure you have Node 8 installed and create-edx-react-app set up. Follow the instructions at the links.
- Run create-edx-react-app and follow the prompts to generate a new example frontend application.
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
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
- In your browser, enter the endpoint URL from step 4:
- Behold the glory of the cookiecutter on the open internet.