A video guide on this can be found here
This is a template for deploying a React application onto a serverless website via the Website Component.
The Website Component sets up everything you need within seconds. It uses AWS S3 for hosting, AWS Cloudfront for a blazing fast CDN, AWS Route 53 to configure your custom domain and an AWS ACM Certificate to secure your with with SSL.
Overall, this infrastructure stack is perhaps the cheapest possible way to deploy a front-end application, that is massively scalable, and performant.
Learn more about this Component in its repository.
Install the Serverless Framework:
$ npm i -g serverlessAdd the access keys of an AWS IAM Role with AdministratorAccess in a .env file, using this format:
AWS_ACCESS_KEY_ID=1234
AWS_SECRET_ACCESS_KEY=1234Or, you can set these as environment variables manually before deploying.
Install the NPM dependencies:
$ npm iRun the website locally with Parcel, using:
$ npm run startPlease note that while the Website Component sets up almost everything for you with a single command, if you want to set up a custom domain, you MUST purchase it in your AWS account manually via Route 53. We have not yet automated domain registration. After registering it, you may have to wait a few minutes for registration to complete before you can use it.
Deploy via the serverless command:
$ serverlessUse the --debug flag if you'd like to learn what's happening behind the scenes:
$ serverless --debugIf you aren't using a custom domain, AWS Cloudfront and HTTPS:// will not be set up. Instead, you will receive an HTTP:// domain from AWS S3.
When you add a custom domain, AWS Cloudfront and HTTPS:// will be set up automatically with it.
Remember, once you deploy with a custom domain for the first time, it may take up to an hour for DNS servers to propagate that change.
Checkout the Serverless Components repo for more information.