Now that we have our backend deployed, let’s deploy our react frontend to our custom domain.
The frontend app will be statically hosted in S3 / CloudFront under a custom domain. All of this is configured already in the CloudFormation template. The React app will interact with the GraphQL API we deploy in Part 3 for all of its data needs. We do not actually send full GraphQL queries, but rather just the query name and variables. This approach is fairly common, and helps prevent API abuse as well as reduces data transmission size. For private APIs which are tightly coupled to the app UI / features, this is an acceptable design. Simply follow the steps in the README to deploy the app.
I will not try to cover React in this series, as there are many other places to learn about this library. I will just share some thoughts on my experience. First, it is super easy to learn if you know JS. I picked it up literally in a couple of hours after following their tutorial. As someone who has used almost all the other JS frameworks, this was very refreshing. Clearly they prioritized the developer experience when creating the API. Also, the ecosystem of React components is phenomenal. React seems to be fulfilling the original vision of Web Components, by providing drop in solutions to many of the tasks a web developer would face. The fact that React Native and ReactVR are also possible is more evidence that the API and abstractions are well designed. It used to feel like there was a new JS framework every week, now its more like a new React clone every week. Declarative UI is here to stay. What’s even more exciting, is this approach fits nicely with visual abstractions, opening up new opportunities for non coders to create real apps.
React has no opinion on how to style your components. There are many solutions, but the best I think is styled-components. When using this library, the React component just becomes structure + state + behavior. The styles are an orthogonal concern which once again, makes developing a component much simpler. The less things to keep in your mind at once the better. The library also has first class support for animations, theming, and everything else you would expect.
This project is amazing. It lets the developer lunch a react app with zero configuration. For small or even medium sized projects this is the recommended approach. It reminds me of Ruby On Rails’ “Convention over configuration.” mantra. Let’s leave all the common stuff to the tool, so we as devs can once again focus on our business logic. ( are you noticing a trend here? ) I decided not to use redux in this app, though I am a big fan of its API design. It really only makes sense for medium or large apps though. I am also a big fan of the folder structure described in this blog post.
Now on to Part 5.