fix: serverless deployments

examples/with-serverless/.gitignore

@@ -67,3 +67,5 @@ yarn-error.log
 .pnp.js
 # Yarn Integrity file
 .yarn-integrity
+.serverless
+

examples/with-serverless/gatsby-config.js

@@ -1,3 +1,5 @@
+require('dotenv').config();
+
 module.exports = {
     siteMetadata: {
         title: 'Gatsby Default Starter',
@@ -6,10 +8,10 @@ module.exports = {
     },
     plugins: [
         {
-            resolve: `gatsby-plugin-s3`,
+            resolve: 'gatsby-plugin-s3',
             options: {
-                bucketName: 'gatsby-plugin-s3-dev-serverless',
-                region: 'eu-west-1'
+                bucketName: process.env.GATSBY_S3_TARGET_BUCKET || 'gatsby-plugin-s3-dev-serverless',
+                region: process.env.AWS_REGION || 'eu-west-1',
             },
         }
     ]

examples/with-serverless/gatsby-node.js

@@ -1,14 +1,23 @@
-exports.createPages = ({ actions }) => {
+exports.createPages = ({actions}) => {
     // create some test redirects
     actions.createRedirect({
         fromPath: '/',
-        toPath: '/page-2',
+        toPath: '/page-2/',
         isPermanent: true,
         redirectInBrowser: true
     });
     actions.createRedirect({
         fromPath: '/hello-there',
-        toPath: '/high-ground',
+        toPath: '/high-ground/',
         isPermanent: false
     });
-};
+};
+
+// Required for client only paths to work
+exports.onCreatePage = async ({page, actions}) => {
+    const {createPage} = actions
+    if (page.path.match(/^\/client-only/)) {
+        page.matchPath = "/client-only/*"
+        createPage(page)
+    }
+}

examples/with-serverless/serverless.yml

@@ -22,14 +22,32 @@ resources:
       Type: AWS::S3::Bucket
       Properties:
         BucketName: ${self:custom.frontendBucketName}
-        AccessControl: PublicRead
+        OwnershipControls:
+          Rules:
+            - ObjectOwnership: ObjectWriter
+        PublicAccessBlockConfiguration:
+          BlockPublicAcls: false
+          BlockPublicPolicy: false
+          IgnorePublicAcls: false
+          RestrictPublicBuckets: false
         WebsiteConfiguration:
           IndexDocument: index.html
           ErrorDocument: 404.html
           RoutingRules: ${file(./.cache/s3.sls.routingRules.json)}
+    FrontendBucketPublic:
+      Type: AWS::S3::BucketPolicy
+      Properties:
+        Bucket: !Ref FrontendBucket
+        PolicyDocument:
+          Version: '2012-10-17'
+          Statement:
+            - Principal: '*'
+              Action: 's3:GetObject'
+              Effect: Allow
+              Resource: !Sub '${FrontendBucket.Arn}/*'
 
 # UNCOMMENT THE FOLLOWING if you wish to add cloudfront.
-# Be aware that cloudfront deploys take a long time so the deploy script may take up to 
+# Be aware that cloudfront deploys take a long time so the deploy script may take up to
 # 20 mins when deploying changes to the cloudfront configuration values.
 
 #    WebAppCloudFrontDistribution:
@@ -83,4 +101,4 @@ resources:
 #  Outputs:
 #    WebAppCloudFrontDistributionOutput:
 #      Value:
-#        'Fn::GetAtt': [ WebAppCloudFrontDistribution, DomainName ]
+#        'Fn::GetAtt': [ WebAppCloudFrontDistribution, DomainName ]

examples/with-serverless/src/components/header.js

@@ -1,42 +1,42 @@
-import { Link } from 'gatsby';
-import PropTypes from 'prop-types';
-import React from 'react';
+import { Link } from "gatsby";
+import PropTypes from "prop-types";
+import React from "react";
 
 const Header = ({ siteTitle }) => (
+  <div
+    style={{
+      background: "rebeccapurple",
+      marginBottom: "1.45rem",
+    }}
+  >
     <div
-        style={{
-            background: 'rebeccapurple',
-            marginBottom: '1.45rem'
-        }}
+      style={{
+        margin: "0 auto",
+        maxWidth: 960,
+        padding: "1.45rem 1.0875rem",
+      }}
     >
-        <div
-            style={{
-                margin: '0 auto',
-                maxWidth: 960,
-                padding: '1.45rem 1.0875rem'
-            }}
+      <h1 style={{ margin: 0 }}>
+        <Link
+          to="/"
+          style={{
+            color: "white",
+            textDecoration: "none",
+          }}
         >
-            <h1 style={{ margin: 0 }}>
-                <Link
-                    to="/"
-                    style={{
-                        color: 'white',
-                        textDecoration: 'none'
-                    }}
-                >
-                    {siteTitle}
-                </Link>
-            </h1>
-        </div>
+          {siteTitle}
+        </Link>
+      </h1>
     </div>
+  </div>
 );
 
 Header.propTypes = {
-    siteTitle: PropTypes.string
+  siteTitle: PropTypes.string,
 };
 
 Header.defaultProps = {
-    siteTitle: ''
+  siteTitle: "",
 };
 
 export default Header;

examples/with-serverless/src/components/layout.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { graphql, StaticQuery } from 'gatsby';
+import React from "react";
+import PropTypes from "prop-types";
+import { graphql, StaticQuery } from "gatsby";
 
-import Header from './header';
-import './layout.css';
+import Header from "./header";
+import "./layout.css";
 
 const Layout = ({ children }) => (
-    <StaticQuery
-        query={graphql`
+  <StaticQuery
+    query={graphql`
       query SiteTitleQuery {
         site {
           siteMetadata {
@@ -16,26 +16,26 @@ const Layout = ({ children }) => (
         }
       }
     `}
-        render={data => (
-            <>
-                <Header siteTitle={data.site.siteMetadata.title} />
-                <div
-                    style={{
-                        margin: '0 auto',
-                        maxWidth: 960,
-                        padding: '0px 1.0875rem 1.45rem',
-                        paddingTop: 0
-                    }}
-                >
-                    {children}
-                </div>
-            </>
-        )}
-    />
+    render={(data) => (
+      <>
+        <Header siteTitle={data.site.siteMetadata.title} />
+        <div
+          style={{
+            margin: "0 auto",
+            maxWidth: 960,
+            padding: "0px 1.0875rem 1.45rem",
+            paddingTop: 0,
+          }}
+        >
+          {children}
+        </div>
+      </>
+    )}
+  />
 );
 
 Layout.propTypes = {
-    children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
 };
 
 export default Layout;

examples/with-serverless/src/pages/404.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import Layout from '../components/layout';
+import React from "react";
+import Layout from "../components/layout";
 
 const NotFoundPage = () => (
-    <Layout>
-        <h1>NOT FOUND</h1>
-        <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-    </Layout>
+  <Layout>
+    <h1>NOT FOUND</h1>
+    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+  </Layout>
 );
 
 export default NotFoundPage;

examples/with-serverless/src/pages/client-only.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Router } from "@reach/router";
+import { Link } from "gatsby";
+
+const Home = () => (
+  <div>
+    <p>Welcome to the app!</p>
+    <Link to="/client-only/secret">
+      Here's a secret route that doesn't exist on the server
+    </Link>
+  </div>
+);
+
+const Secret = () => <div>You're visiting me from the client side!</div>;
+
+const ClientOnlyRoutes = () => (
+  <Router basepath="/client-only">
+    <Home path="/" />
+    <Secret path="/secret" />
+  </Router>
+);
+
+export default ClientOnlyRoutes;

examples/with-serverless/src/pages/page-2.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import { Link } from 'gatsby';
-import Layout from '../components/layout';
+import React from "react";
+import { Link } from "gatsby";
+import Layout from "../components/layout";
 
 const SecondPage = () => (
-    <Layout>
-        <h1>Hi from the second page</h1>
-        <p>Welcome to page 2</p>
-        <Link to="/">Go back to the homepage</Link>
-    </Layout>
+  <Layout>
+    <h1>Hi from the second page</h1>
+    <p>Welcome to page 2</p>
+    <Link to="/">Go back to the homepage</Link>
+  </Layout>
 );
 
 export default SecondPage;