This article originally appeared on . the Cosmic JS Blog So you’ve read all the great reasons to , and you’ve produced a great looking single page app to display your content. But how do you serve it to the user? go API-first You COULD set up a full Node server to host, route and serve your site. Or you could just host your website statically using AWS S3 and CloudFront! This means you simply put your website source files online, and they’re served immediately to the user, no server processing needed. There are several big advantages to static hosting with client-side rendering: + Blazing Fast (no server preprocessing) + Really simply (no server architecture to maintain) + Crazy Available (your server can’t break if there isn’t one) + Instant Updates (don’t have to wait for the site to rebuild to see your changes) Setting up a static site is easier than you might think, and this tutorial walks you through how to set up a static website that gets its data from Cosmic JS and renders on the client in under 10 minutes! We’ll also cover some tips and tricks on getting the most out of your static site that you might not have known, which will be useful, even if you’re not building a purely static site. TL;DR View the demo here Check out the React GraphQL Static Site codebase The site we’ll be hosting Our example website is a static single page app, in our case using and , with handling routing, and to fetch data (tutorial coming soon). webpack react react-router Cosmic JS's GraphQL API If you’d like to follow along at home, you can . download our demo code here Our demo site is structured as follows: .├── asset-manifest.json├── favicon.ico├── index.html└── static└── js├── main.3c8c3c1e.js├── manifest.4a707e54.js├── vendor.94287fcf.js├── vendorConstant.0e34bc16.js└── vendorReactApollo.c8e28b23.js We’ve broken our into several different files so that they can be cached independently; if is the only file that changes, it's the only file that our clients will have to re-get when they revisit our site. js vendorReactApollo is the only HTML file we need to deploy, and it's minimal: index.html <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title></head><body><div id="root"> </div><script type="text/javascript" src="/static/js/manifest.4a707e54.js"> </script><script type="text/javascript" src="/static/js/vendorConstant.0e34bc16.js"></script><script type="text/javascript" src="/static/js/vendorReactApollo.c8e28b23.js"></script><script type="text/javascript" src="/static/js/vendor.94287fcf.js"></script><script type="text/javascript" src="/static/js/main.3c8c3c1e.js"></script></body></html> With this single page app structure, we’re ready to start serving it as a static site using AWS S3! S3 setup AWS S3 buckets can serve their contents as static web pages with little setup. This provides a hassle free solution for serving static files, like our website, quickly and simply. Enabling website hosting on S3 requires a few steps: 1. Bucket Policy First, you need to set permissions for all files in your S3 bucket so they can be read by anyone. You can copy-paste the code we’ve used, and replace our bucket name ( ) with your own: codogo-cosmic-js-demo-blog {"Version": "2012-10-17","Statement": [{"Sid": "AddPerm","Effect": "Allow","Principal": "*","Action": "s3:GetObject","Resource": "arn:aws:s3:::codogo-cosmic-js-demo-blog/*"}]} 2. Website Hosting Click on , and fill in the details as below. Static website hosting The is required, and tells the S3 bucket which file to serve if we navigate to the root of our website. Index Document The is the file that’s served whenever a client navigates to a file that doesn’t exist in the bucket. This is the most important setting for this tutorial, as it means no matter which path the user navigates to, they are still served our file. Error Document index.html 3. Upload your files Upload your site to the root of your S3 bucket and your site will be ready to serve. Testing the hosting out Navigate to the URL shown in the box, and you should see your web app! You can . Endpoint Static Website Hosting check out our demo here Try navigating to other pages and refreshing the page — you should see that your web app loads as if the pages you’re navigating to actually exist on the server. Next steps For a small site with low, unimportant traffic — for example, a company internal website — this hosting would be sufficient. However, there are two main issues with this hosting solution: : The website will only be served from the AWS region where your bucket lives, so people in other parts of the world will see poor performance. Served from one region : If you open your browser network inspector and navigate to a page, you’ll see that the server is responding with a code, instead of the / that we want. HTTP 404 Response code 404 200 302 Having every page of our site return a code is terrible for SEO as any web-crawler that checks the HTTP response code will think every link on our site is broken! In the next section we'll look at how we can use AWS CloudFront to cache our site, handle our traffic, and fix our error code issue. 404 CloudFront Config 1. Create A CloudFront Distribution We need to create a CloudFront web distribution through which all our web traffic will flow. This will handle the world wide distribution of our S3 website, and can intercept and correct our codes. 404 In the field you'll be given the option to pick your S3 bucket. **Do Not Do This!**Instead, set the to be your S3 website URL. For example, for our demo it would be codogo-cosmic-js-demo-blog.s3-website-eu-west-1.amazonaws.com, not codogo-cosmic-js-demo-blog.s3.amazonaws.com. Origin Domain Name Origin Domain Name 2. Cache long term files Now we’re going to tell CloudFront how to cache our files. To do this we need to create a new Behaviour. static We want our to match everything in our static folder. The should be left as they are. Path Pattern Object Settings 3. Correct Response Code Now we create a new error page to intercept the errors from S3. Fill out the custom response as above. You’ll need to give your CloudFront distribution around 15 minutes to fully deploy, but then it should be accessible at it’s domain name, ours looks like this: d2hqptkles3gsg.cloudfront.net. Conclusion And there you have it: A simple client-side rendered static site to display content from Cosmic JS that’s super fast and super simple. If you’re making a static site, or anything else, with Cosmic JS or ; we’d love to see what you’re making. This post was written by , a fresh new digital agency with a passion for creating amazing digital experiences. Keep an eye out for our next post, on best practice for making a Cosmic JS site using React and GraphQL. get in touch on out Slack Twitter Codogo

Flow

Fetch

Slack

Super

Twitter

cosmic js

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How To Build a React GraphQL Static Site Served From AWS CloudFront

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Tony Spiro

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Build a React GraphQL Static Site Served From AWS CloudFront

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Tony Spiro

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES