Script infrastructure with Terraform. Utilise Bitbucket Pipelines for…

… CI. Remove config.js nonsense and use env variables. Tidy webpack.configs. Update readme. Update packages. Use Yarn. Add Serverless Web API.
jch254 · Oct 25, 2016 · 825a406 · 825a406
1 parent a3ef2ef
commit 825a406
Show file tree

Hide file tree

Showing 21 changed files with 2,286 additions and 87 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,9 @@
+{
+  "presets": ["latest", "react"],
+  "plugins": [
+    "transform-runtime",
+    "transform-inline-environment-variables",
+    "transform-class-properties",
+    "transform-object-rest-spread"
+  ]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -1,35 +1,16 @@
 {
-  "extends": "airbnb",
-  "env": {
-    "browser": true,
-    "mocha": true,
-    "node": true,
-    "es6": true
+  extends: "airbnb",
+  env: {
+    browser: true,
+    node: true,
+    es6: true
   },
- "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true,
-            "experimentalObjectRestSpread": true,
-        },
-        "sourceType": "module"
-    },
-    "rules": {
-        "no-const-assign": 1,
-        "no-extra-semi": 0,
-        "semi": 0,
-        "no-fallthrough": 0,
-        "no-empty": 0,
-        "no-mixed-spaces-and-tabs": 0,
-        "no-redeclare": 0,
-        "no-this-before-super": 1,
-        "no-undef": 1,
-        "no-unreachable": 1,
-        "no-unused-vars": 1,
-        "no-use-before-define": 0,
-        "constructor-super": 1,
-        "curly": 0,
-        "eqeqeq": 0,
-        "func-names": 0,
-        "valid-typeof": 1
-    }
+  parser: "babel-eslint",
+  rules: {
+    max-len: ["error", 120, 2],
+    react/jsx-filename-extension: ["error", { extensions: [".js", ".jsx"] }],
+    react/forbid-prop-types: 0,
+    jsx-a11y/no-static-element-interactions: 0,
+    import/no-extraneous-dependencies: ["error", { devDependencies: true }]
+  }
 }
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,4 @@ node_modules
 npm-debug.log
 .DS_Store
 index.html
-semaphore
+yarn-error.log
diff --git a/README.md b/README.md
@@ -1,12 +1,10 @@
 # [603.nu](https://603.nu)
 
-[![Build Status](https://semaphoreci.com/api/v1/jch254/603-nu/branches/master/shields_badge.svg)](https://semaphoreci.com/jch254/603-nu)
-
 Source code for https://603.nu.
 
 ## Build
 1. Run the following commands in the app's root directory then check the /dist folder
 ```
-npm install
-npm run build
+yarn install
+yarn run build
 ```
diff --git a/bitbucket-pipelines.yml b/bitbucket-pipelines.yml
@@ -0,0 +1,12 @@
+image: jch254/docker-node-terraform-aws:latest
+pipelines:
+  branches:
+    master:
+      - step:
+          script:
+            - export AWS_ACCESS_KEY_ID=$AWS_KEY
+            - export AWS_SECRET_ACCESS_KEY=$AWS_SECRET
+            - export AWS_DEFAULT_REGION=$AWS_REGION
+            - ./build-artifacts.bash
+            - ./deploy-infrastructure.bash
+            - ./upload-artifacts.bash
diff --git a/build-artifacts.bash b/build-artifacts.bash
@@ -0,0 +1,3 @@
+yarn install
+export NODE_ENV=production
+yarn run build
diff --git a/components/App.js b/components/App.js
@@ -1,19 +1,19 @@
-import React from 'react'
+import React from 'react';
 
-import Head from './Head'
-import Header from './Header'
-import Main from './Main'
-import Footer from './Footer'
+import Head from './Head';
+import Header from './Header';
+import Main from './Main';
+import Footer from './Footer';
 
 const App = () => (
-  <html>
+  <html lang="en">
     <Head title="603.nu | Web Experiments" />
     <body>
       <Header />
       <Main />
       <Footer />
     </body>
   </html>
-)
+);
 
-export default App
+export default App;
diff --git a/components/Footer.js b/components/Footer.js
@@ -10,7 +10,9 @@ const Footer = () => (
   <Box style={{ flex: 'none' }}>
     <Toolbar backgroundColor="white">
       <Space auto />
-      <NavItem color="black" href="https://jch254.com" children="© Jordan Hornblow 2016" />
+      <NavItem color="black" href="https://jch254.com">
+        © Jordan Hornblow 2016
+      </NavItem>
     </Toolbar>
   </Box>
 );

diff --git a/components/Head.js b/components/Head.js
@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React, { PropTypes } from 'react';
 
 const Head = ({ title }) => (
   <head>
@@ -8,10 +8,10 @@ const Head = ({ title }) => (
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="shortcut icon" href="./favicon.ico" />
   </head>
-)
-
-export default Head
+);
 
 Head.propTypes = {
   title: PropTypes.string,
-}
+};
+
+export default Head;
diff --git a/components/Header.js b/components/Header.js
@@ -1,18 +1,22 @@
-import React from 'react'
+import React from 'react';
 import {
   Banner,
   Heading,
-} from 'rebass'
+} from 'rebass';
 
 const Header = () => (
   <Banner
     style={{ minHeight: '75vh', backgroundAttachment: 'scroll' }}
     backgroundImage="./img/Wolf.jpg"
     m={0}
   >
-    <Heading size={1} big children="603.nu" />
-    <Heading size={2} children="Web Experiments" />
+    <Heading size={1} big>
+      603.nu
+    </Heading>
+    <Heading size={2}>
+      Web Experiments
+    </Heading>
   </Banner>
-)
+);
 
-export default Header
+export default Header;
diff --git a/components/Main.js b/components/Main.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Flex } from 'reflexbox';
-import Icon from 'react-geomicons';
 import {
   Container,
   Heading,
@@ -21,7 +20,9 @@ const Main = () => (
     <Flex column>
       <Block pt={4} mt={3} mb={0}>
         <Media m={0} align="center" img="./img/Goku.png">
-          <Heading size={2} big children="Kia ora" />
+          <Heading size={2} big>
+            Kia ora
+          </Heading>
         </Media>
       </Block>
       <Section pb={0}>
@@ -46,10 +47,12 @@ const Main = () => (
               <CardImage src="./img/AI.png" />
             </a>
             <Flex>
-              <HeadingLink children="Audio Insights" href="https://ai.603.nu" />
+              <HeadingLink href="https://audio-insights.603.nu">
+                Audio Insights
+              </HeadingLink>
               <Space auto />
-              <a href="https://github.com/jch254/audio-insights" target="_blank">
-                <Icon name="github" width="24px" height="24px" />
+              <a href="https://github.com/jch254/audio-insights" target="_blank" rel="noopener noreferrer">
+                GitHub
               </a>
             </Flex>
             <Text small>
@@ -61,40 +64,91 @@ const Main = () => (
               <CardImage src="./img/SP.png" />
             </a>
             <Flex>
-              <HeadingLink children="Starter Pack" href="https://sp.603.nu" />
+              <HeadingLink href="https://sp.603.nu">
+                Starter Pack
+              </HeadingLink>
               <Space auto />
-              <a href="https://github.com/jch254/starter-pack" target="_blank">
-                <Icon name="github" width="24px" height="24px" />
+              <a href="https://github.com/jch254/starter-pack" target="_blank" rel="noopener noreferrer">
+                GitHub
               </a>
             </Flex>
             <Text small>
-              Combines React, Redux and Redux-saga with Auth0's Lock as a starting point for
+              Combines React, Redux and Redux-saga with Auth0&#39;s Lock as a starting point for
               modern web apps with solid authentication.
             </Text>
           </Card>
+          <Card m={2} style={{ width: '309px', height: '333px' }}>
+            <a href="https://serverless-web-api.603.nu">
+              <CardImage src="./img/SW.png" />
+            </a>
+            <Flex>
+              <HeadingLink href="https://sp.603.nu">
+                Serverless Web API
+              </HeadingLink>
+              <Space auto />
+              <a
+                href="https://github.com/jch254/serverless-es6-dynamodb-webapi"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                GitHub
+              </a>
+            </Flex>
+            <Text small>
+              A simple web API powered by Serverless (Node.js) and DynamoDB, intended as a starting point for
+              Serverless web APIs
+            </Text>
+          </Card>
           <Card m={2} style={{ width: '309px', height: '333px' }}>
             <CardImage src="./img/Matrix.gif" />
             <Flex>
-              <Heading children="Under Development" />
+              <Heading>
+                Under Development
+              </Heading>
               <Space auto />
-              <Icon name="github" width="24px" height="24px" />
             </Flex>
-            <Text small children="Go on... Check back soon." />
+            <Text small>
+              Check back soon.
+            </Text>
+          </Card>
+          <Card m={2} style={{ width: '309px', height: '333px' }}>
+            <CardImage src="./img/Matrix.gif" />
+            <Flex>
+              <Heading>
+                Under Development
+              </Heading>
+              <Space auto />
+            </Flex>
+            <Text small>
+              Check back soon.
+            </Text>
+          </Card>
+          <Card m={2} style={{ width: '309px', height: '333px' }}>
+            <CardImage src="./img/Matrix.gif" />
+            <Flex>
+              <Heading>
+                Under Development
+              </Heading>
+              <Space auto />
+            </Flex>
+            <Text small>
+              Check back soon.
+            </Text>
           </Card>
         </Flex>
       </Section>
       <Section pb={0}>
         <Blockquote mt={3} source="Eckhart Tolle">
           Nothing scares the egoic mind more than the unknown, the idea of something new, something
           different. The mind always adheres to the known. The unknown is dangerous because it has
-          no control over it. That's why the mind dislikes and ignores the present moment.
+          no control over it. That&#39;s why the mind dislikes and ignores the present moment.
           Present-moment awareness creates a gap in the stream of mind but also in the past-future
           continuum. Nothing truly new and creative can come into this world except through that
           gap, that clear space of infinite possibility.
         </Blockquote>
       </Section>
     </Flex>
   </Container>
-)
+);
 
-export default Main
+export default Main;
diff --git a/deploy-infrastructure.bash b/deploy-infrastructure.bash
@@ -0,0 +1,13 @@
+export TF_VAR_route53_zone_id=$ROUTE53_ZONE_ID
+export TF_VAR_acm_arn=$ACM_ARN
+
+cd infrastructure
+terraform remote config -backend=s3 \
+  -backend-config="bucket=603-terraform-remote-state" \
+  -backend-config="key=603.nu.tfstate" \
+  -backend-config="region=ap-southeast-2" \
+  -backend-config="encrypt=true"
+
+terraform plan -var-file 603.nu.tfvars
+terraform apply -var-file 603.nu.tfvars
+cd ..
diff --git a/dist/img/SW.png b/dist/img/SW.png