Merge d3e3406 into 798d788

.env.sample

@@ -0,0 +1,27 @@
+# These are environemnt variables used in server.js (outside next.js)
+#
+
+# rumors-site server config
+PORT=3000
+
+# error logger token
+ROLLBAR_SERVER_TOKEN=
+# in which rollbar environment we should send errors to
+ROLLBAR_ENV=
+
+# - - -
+
+# The below are environment variables used by next.js
+#
+# PUBLIC_* will be exposed to next.js client bundle
+# SERVER_* will be exposed to server-side only
+#
+
+# rumors-api's URL
+PUBLIC_API_URL=https://cofacts-api.hacktabl.org
+
+# Sent to rumors-api to identify client
+PUBLIC_APP_ID=DEV
+
+# Googla analytics tracker ID
+PUBLIC_GA_TRACKER=

.gitignore

@@ -3,3 +3,4 @@ node_modules
 *.log
 coverage
 .vscode
+.env

Dockerfile

@@ -9,11 +9,6 @@ ENTRYPOINT npm start
 COPY package.json package-lock.json ./
 RUN npm install
 
-# Setup environment for client/server build and server execution
-#
-ARG BUILD_TARGET
-ENV NODE_ENV=production BUILD_TARGET=${BUILD_TARGET}
-
 # Other files, so that other files do not interfere with node_modules cache
 #
 COPY . .

README.md

@@ -2,7 +2,13 @@
 
 [![Build Status](https://travis-ci.org/cofacts/rumors-site.svg?branch=master)](https://travis-ci.org/cofacts/rumors-site) [![Coverage Status](https://coveralls.io/repos/github/cofacts/rumors-site/badge.svg?branch=master)](https://coveralls.io/github/cofacts/rumors-site?branch=master)
 
-Rumors list / creation UI, with server-side rendering
+Rumors list / creation UI, with server-side rendering.
+
+## Configuration
+
+For development, copy `.env.sample` to `.env` and make necessary changes.
+
+For production via [rumros-deploy](http://github.com/cofacts/rumors-deploy), do setups in `docker-compose.yml`.
 
 ## Development
 
@@ -12,11 +18,6 @@ This project uses NodeJS 8+ and npm 5+.
 $ npm install
 $ npm run dev # Then visit http://localhost:3000
 
-# By default the site will connect to staging API server.
-# If you started your own API server using docker-compose in https://github.com/MrOrz/rumors-api,
-# Use this instead:
-$ BUILD_TARGET=local npm run dev
-
 # Before you pull request, please lint your code first
 $ npm run lint
 # fix eslint
@@ -25,15 +26,11 @@ $ npm run lint:fix
 $ npm t
 ```
 
-### ENV vars and Cache issue
-
-If you found that `BUILD_TARGET` does not work (i.e. the server still sends to production server even when `BUILD_TARGET` is set), try removing `node_modules/.cache`. This is [an known issue](https://github.com/zeit/next.js/issues/1103).
-
 ### styled-jsx syntax highlighting
 
 See: https://github.com/zeit/styled-jsx#syntax-highlighting
 
-## Landing Page (Makeshift)
+### Landing Page (Makeshift)
 
 We build a temporary landing page in the repo [grants-landing-template](github.com/cofacts/grants-landing-template).
 
@@ -48,10 +45,9 @@ grants-landing-template $ cd ../rumors-site
 rumors-site $ npm run landing
 ```
 
-
 ## Deploy
 
-Build docker image
+Build docker image. These images are the same, just tagged differently.
 
 ``` bash
 # Production build

components/Modal/LoginModal.js

@@ -5,7 +5,7 @@ import Modal from './';
 import { hideDialog } from 'ducks/auth';
 
 const {
-  publicRuntimeConfig: { API_URL },
+  publicRuntimeConfig: { PUBLIC_API_URL },
 } = getConfig();
 
 function LoginModal({ isDialogShown, onModalClose }) {
@@ -19,13 +19,15 @@ function LoginModal({ isDialogShown, onModalClose }) {
     <Modal onClose={onModalClose}>
       <div className="root">
         <h1>Login / Signup</h1>
-        <a href={`${API_URL}/login/facebook?redirect=${redirectUrl}`}>
+        <a href={`${PUBLIC_API_URL}/login/facebook?redirect=${redirectUrl}`}>
           Facebook
         </a>・
-        <a href={`${API_URL}/login/twitter?redirect=${redirectUrl}`}>
+        <a href={`${PUBLIC_API_URL}/login/twitter?redirect=${redirectUrl}`}>
           Twitter
         </a>・
-        <a href={`${API_URL}/login/github?redirect=${redirectUrl}`}>Github</a>
+        <a href={`${PUBLIC_API_URL}/login/github?redirect=${redirectUrl}`}>
+          Github
+        </a>
       </div>
       <style jsx>{`
         .root {

ducks/__mocks__/next/config.js

@@ -2,7 +2,7 @@
 
 function getConfig() {
   return {
-    publicRuntimeConfig: { API_URL: 'API_URL', APP_ID: 'APP_ID' },
+    publicRuntimeConfig: { PUBLIC_API_URL: 'API_URL', PUBLIC_APP_ID: 'APP_ID' },
   };
 }
 

next.config.js

@@ -4,45 +4,27 @@ const { config } = require('./package.json');
 const withCSS = require('@zeit/next-css');
 const withImages = require('next-images');
 
-let envConfig = {};
+const publicRuntimeConfig = {};
+const serverRuntimeConfig = {};
 
-switch (process.env.BUILD_TARGET) {
-  case 'production':
-    envConfig = {
-      API_URL: 'https://cofacts-api.g0v.tw',
-      APP_ID: 'RUMORS_SITE',
-      GA_TRACKER: 'UA-98468513-1',
-    };
-    break;
-
-  case 'staging':
-    envConfig = {
-      API_URL: 'https://cofacts-api.hacktabl.org',
-      APP_ID: 'RUMORS_SITE',
-      GA_TRACKER: 'UA-98468513-5',
-    };
-    break;
-
-  case 'local':
-    // Own API server started using docker-compose in https://github.com/MrOrz/rumors-api
-    envConfig = {
-      API_URL: 'http://localhost:5000',
-      APP_ID: 'DEV',
-    };
-    break;
-
-  default:
-    envConfig = {
-      API_URL: 'https://cofacts-api.hacktabl.org', // Default to staging
-      APP_ID: 'DEV',
-    };
-}
+Object.keys(process.env).forEach(key => {
+  switch (true) {
+    case key.startsWith('SERVER_'):
+      serverRuntimeConfig[key] = process.env[key];
+      break;
+    case key.startsWith('PUBLIC_'):
+      publicRuntimeConfig[key] = process.env[key];
+      break;
+    default:
+  }
+});
 
 module.exports = withImages(
   withCSS({
     publicRuntimeConfig: {
+      ...publicRuntimeConfig,
       AUTOTRACK_FILENAME: config.autotrackFileName,
-      ...envConfig,
     },
+    serverRuntimeConfig,
   })
 );