The React PWA (Progressive Web App) Reference Storefront is preconfigured to deploy on Amazon Web Service S3 (AWS S3).
- Ensure that an AWS (Amazon Web Services) account to deploy the website on the AWS S3 bucket is created
- Ensure that you can use the AWS S3 bucket for hosting your React PWA Reference Storefront
- Ensure that an AWS Identity and Access Management (IAM) profile is created
- Ensure that the AWS CLI tool is installed. For more information about platform specific procedures, see the Amazon documentation
- Ensure that you set up your AWS credentials on CLI.
Note: open a new terminal, and type
React PWA Reference Storefront on Amazon S3 Bucket Example
- Create an Amazon S3 bucket by doing the following:
- Log in to the AWS account
- Follow the guidelines for using the available access policy optionsand generate a policy with the following settings:
- Ensure that your bucket policy sets the bucket and all objects in the bucket to public
For the ARN (Amazon Resource Names), use the name of your bucket with
/*at the end to provide everyone access to all files
- Set up the bucket as static hosting by doing the following:
- In the bucket’s console, navigate to Properties>Static Website Hosting
- Select Use this bucket to host a website
- Fill the form and click Save
- Update the Cross-Origin Resource Sharing (CORS) configuration by pasting the following into Permissions>CORS configuration and click Save:
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>HEAD</AllowedMethod> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <ExposeHeader>ETag</ExposeHeader> <ExposeHeader>x-amz-meta-custom-header</ExposeHeader> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>
Note: Modify the settings as required. With this configuration, the storefront can perform cross-origin requests to any origin.
Deploy your application by doing the following:
- Update the bucket name in the
"deploy": "aws s3 sync webpack/dist/ s3://bucket-name"
- Run the
npm run buildcommand
- Run the
npm run deploycommand
Configure the Amazon CloudFront following the instructions at Getting Started with CloudFront.
After completing the set up, you can access your website at the domain name.