chore: setup deployment

me4502 · Aug 31, 2019 · 2931a0b · 2931a0b
1 parent 045faa2
commit 2931a0b
Show file tree

Hide file tree

Showing 14 changed files with 1,513 additions and 171 deletions.
diff --git a/.gitignore b/.gitignore
@@ -59,3 +59,4 @@ typings/
 
 # next.js build output
 .next
+.serverless
diff --git a/components/nav.js b/components/nav.js
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,12 @@
+
+const prod = process.env.NODE_ENV === 'production';
+const ASSETS_PREFIX = 'https://static.worldedit.golf';
+
+module.exports = {
+    target: 'serverless',
+    assetsPrefix: ASSETS_PREFIX,
+    env: {
+        STATIC_PREFIX: prod ? ASSETS_PREFIX : '',
+        // GA_TRACKING_ID: 'UA-139849956-4'
+    }
+};
diff --git a/package.json b/package.json
@@ -5,12 +5,25 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "type-check": "tsc --project ./tsconfig.json --noEmit",
+    "lint": "tslint --config ./tslint.json --project ./tsconfig.json",
+    "lint:fix": "tslint --config ./tslint.json --project ./tsconfig.json --fix"
   },
   "dependencies": {
     "next": "9.0.5",
     "react": "16.9.0",
     "react-dom": "16.9.0",
-    "serverless-nextjs-plugin": "^2.3.4"
+    "react-helmet": "^5.2.1",
+    "serverless-nextjs-plugin": "^2.3.4",
+    "serverless-offline": "^5.10.1",
+    "styled-components": "^4.3.2"
+  },
+  "devDependencies": {
+    "@types/node": "^12.7.3",
+    "@types/react": "^16.9.2",
+    "tslint": "^5.19.0",
+    "tslint-react": "^4.0.0",
+    "typescript": "^3.6.2"
   }
 }
diff --git a/pages/_app.js b/pages/_app.js
@@ -0,0 +1,8 @@
+import App from 'next/app';
+import Router from 'next/router';
+
+import * as gtag from '../src/gtag';
+
+Router.events.on('routeChangeComplete', url => gtag.pageview(url));
+
+export default App;
diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import Document, { Head, Main, NextScript, Html } from 'next/document';
+import Helmet from 'react-helmet';
+
+class MyDocument extends Document {
+    static async getInitialProps(ctx) {
+        const initialProps = await Document.getInitialProps(ctx);
+        return { ...initialProps, helmet: Helmet.renderStatic() };
+    }
+
+    render() {
+        const { helmet } = this.props;
+
+        return (
+            <Html {...helmet.htmlAttributes.toComponent()}>
+                <Head>
+                    {helmet.meta.toComponent()}
+                    {helmet.title.toComponent()}
+                    {helmet.link.toComponent()}
+                    {/* Global Site Tag (gtag.js) - Google Analytics */}
+                    <script
+                        async
+                        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_TRACKING_ID}`}
+                    />
+
+                    <link
+                        rel="shortcut icon"
+                        href="/static/icons/icon-48x48.png"
+                    />
+                    <meta name="theme-color" content="#4B3570" />
+                    <link
+                        rel="apple-touch-icon"
+                        sizes="48x48"
+                        href="/static/icons/icon-48x48.png"
+                    />
+                    <link
+                        rel="apple-touch-icon"
+                        sizes="72x72"
+                        href="/static/icons/icon-72x72.png"
+                    />
+                    <link
+                        rel="apple-touch-icon"
+                        sizes="96x96"
+                        href="/static/icons/icon-96x96.png"
+                    />
+                    <link
+                        rel="apple-touch-icon"
+                        sizes="144x144"
+                        href="/static/icons/icon-144x144.png"
+                    />
+                    <link
+                        rel="apple-touch-icon"
+                        sizes="192x192"
+                        href="/static/icons/icon-192x192.png"
+                    />
+                    <link
+                        rel="apple-touch-icon"
+                        sizes="256x256"
+                        href="/static/icons/icon-256x256.png"
+                    />
+                    <link
+                        rel="apple-touch-icon"
+                        sizes="384x384"
+                        href="/static/icons/icon-384x384.png"
+                    />
+                    <link
+                        rel="apple-touch-icon"
+                        sizes="512x512"
+                        href="/static/icons/icon-512x512.png"
+                    />
+
+                    <link
+                        href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=block"
+                        rel="stylesheet"
+                    />
+                    <script
+                        dangerouslySetInnerHTML={{
+                            __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${process.env.GA_TRACKING_ID}');
+          `
+                        }}
+                    />
+                </Head>
+                <body {...helmet.bodyAttributes.toComponent()}>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        );
+    }
+}
+
+export default MyDocument;
diff --git a/pages/index.js b/pages/index.js
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import Link from 'next/link';
+import Head from 'next/head';
+
+const Home = () => (
+  <div>
+    <Head>
+      <title>Home</title>
+    </Head>
+
+    <div className='hero'>
+      <h1 className='title'>Welcome to Next.js!</h1>
+      <p className='description'>
+        To get started, edit <code>pages/index.js</code> and save to reload.
+      </p>
+
+      <div className='row'>
+        <Link href='https://github.com/zeit/next.js#setup'>
+          <a className='card'>
+            <h3>Getting Started &rarr;</h3>
+            <p>Learn more about Next.js on GitHub and in their examples.</p>
+          </a>
+        </Link>
+        <Link href='https://github.com/zeit/next.js/tree/master/examples'>
+          <a className='card'>
+            <h3>Examples &rarr;</h3>
+            <p>Find other example boilerplates on the Next.js GitHub.</p>
+          </a>
+        </Link>
+        <Link href='https://github.com/zeit/next.js'>
+          <a className='card'>
+            <h3>Create Next App &rarr;</h3>
+            <p>Was this tool helpful? Let us know how we can improve it!</p>
+          </a>
+        </Link>
+      </div>
+    </div>
+  </div>
+);
+
+Home.getInitialProps = () => {
+  return {};
+};
+
+export default Home;
diff --git a/serverless.yml b/serverless.yml
@@ -0,0 +1,20 @@
+service: worldedit-golf
+
+provider:
+  name: aws
+  runtime: nodejs10.x
+  memorySize: 128
+
+plugins:
+- serverless-nextjs-plugin
+- serverless-offline
+
+package:
+  # exclude everything
+  # page handlers are automatically included by the plugin
+  exclude:
+    - ./**
+
+custom:
+  serverless-nextjs:
+    assetsBucketName: "static.worldedit.golf"
diff --git a/src/gtag.ts b/src/gtag.ts
@@ -0,0 +1,25 @@
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url: string) => {
+    window['gtag']('config', process.env.GA_TRACKING_ID, {
+        page_path: url
+    });
+};
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({
+    action,
+    category,
+    label,
+    value
+}: {
+    action: string;
+    category: string;
+    label: string;
+    value?: string;
+}) => {
+    window['gtag']('event', action, {
+        event_category: category,
+        event_label: label,
+        value: value
+    });
+};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -59,3 +59,4 @@ typings/

		# next.js build output
		.next
		.serverless
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="next" />
		/// <reference types="next/types/global" />