Build and deploy a serverless multi-page React application on AWS S3.
Using S3 to host a static website can be a very powerful solution due to his automatic scalability and high availability. This is thanks to the Amazon robust infrastructure. Although, building websites with modern frameworks like React that can be deployed on S3 can be a little complicated due to some intrinsic S3 limitations like dynamic routing.
In this article you will learn how to create and deploy a React application with multiple pages following a serverless approach with AWS S3 service.
Amazon Simple Storage Service (S3) allows you to host a static website with a serverless strategy. This means you don't have to provision servers. S3 provides high availability thanks to the Amazon robust infrastructure, it scales automatically to handle millions of requests at a very low cost.
This approach works fine when you are using a web server, you can simple forward all the routes into the same root file with your React application and React will take care of rendering the correct component based on that path. Unfortunately, this won't work when using S3 to serve an application. S3 will try to find the html file for whatever path we try to reach, this means we need to split the React application into multiple files.
dist:this is where webpack will output the bundled application.
src:the source code of the React application. This looks like any other React application but instead of calling ReactDOM.render() in a single root component, we will do so for each page component.
templates: these are HTML files used by Webpack to include the bundled JS files. It is also a good place to import external assets (fonts, styles, etc.). So, if we need to import an asset that is only going to be used in one of the pages of our application, we can create a specific template for that page. Whit this method, we can be certain that other pages won’t load that asset.
.babelrc, .eslintrc.js, package.json: these files will have a similar configuration as any other React application.
webpack.config.js: and finally, here is where we configure multiple bundled files as outputs.
This is the configuration of the Webpack file:
This is an example of a configuration for an application with two pages, In case you want to include more, just follow the same pattern.
To build the application just run: "webpack –p config ./webpack.config.js" in the root folder of the application, this will output the result into the "dist" folder.
Now you can put all the content in the "dist" folder into a S3 bucket and configure it as a static website.
Using S3 as a serverless static website provider give us some great advantages over traditional solutions. It is a very cheap service and provides automatic scaling and a very high availability infrastructure.
Further, we can enhance the dynamic contact of the website with extre serverless solution in AWS like combining API Gateway + Lambda + Dynamo to expose a restful service that can by consumed by the website. This allows us to save and display dynamic data. Also, we could use Cognito to handle user authentication for example.