Add env variables

typeofweb · typeofweb · commit 859cee3e3803 · 2018-05-06T22:00:40.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 npm-debug.log
 /node_modules/
 /.next/
+.env
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@zeit/next-typescript": "0.1.1",
     "classnames": "2.2.5",
     "express": "4.16.3",
+    "htmlescape": "1.1.1",
     "next": "6.0.0",
     "next-images": "0.10.2",
     "next-redux-wrapper": "2.0.0-beta.4",
@@ -33,7 +34,7 @@
   },
   "scripts": {
     "dev": "nodemon server.js --watch server.js --watch routes.js",
-    "build": "next build",
+    "build": "NODE_ENV=production next build",
     "start": "NODE_ENV=production node server.js"
   },
   "keywords": [],
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,4 +1,5 @@
 import Document, { Main, Head, NextScript } from 'next/document';
+import { unsafe_getEnvScriptForDocument } from '../utils/env';
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: any) {
@@ -60,6 +61,8 @@ export default class MyDocument extends Document {
             href="https://fonts.googleapis.com/css?family=Fira+Sans:200,400,700&amp;subset=latin-ext"
             rel="stylesheet"
           />
+
+          <script dangerouslySetInnerHTML={unsafe_getEnvScriptForDocument()} />
         </Head>
         <body>
           <Main />
diff --git a/pages/staticPage.tsx b/pages/staticPage.tsx
@@ -3,6 +3,7 @@ import Layout from '../components/layout/Layout';
 import './index.scss';
 import './staticPage.scss';
 import { AboutPage, AuthorsPage } from './staticPages';
+import env from '../utils/env';
 
 type StaticPageContent = { component: React.ComponentType; title: string };
 const pathToContent: Record<string, StaticPageContent> = {
@@ -23,6 +24,7 @@ export default class Index extends React.Component<{ asPath: string }> {
     return (
       <Layout title={content.title}>
         <div className="container">
+          Process.env: {JSON.stringify(env.API_URL, null, 4)}
           <Component />
         </div>
       </Layout>
diff --git a/utils/env.ts b/utils/env.ts
@@ -0,0 +1,16 @@
+// @ts-ignore
+const env: ProcessENV = 'undefined' !== typeof window ? (window['__ENV__'] as object) : process.env;
+export default env;
+
+export type ProcessENV = ReturnType<typeof getEnvObjForDocument>;
+
+const getEnvObjForDocument = () => {
+  const { API_URL } = process.env;
+  const env = { API_URL };
+  return env;
+};
+
+export const unsafe_getEnvScriptForDocument = () => {
+  const env = getEnvObjForDocument();
+  return { __html: '__ENV__ = ' + require('htmlescape')(env) };
+};
