From 91b347f4b59b2d620cf161997d5447589ee7eaa0 Mon Sep 17 00:00:00 2001
From: Cassey Lottman <>
Date: Mon, 4 Nov 2019 14:02:05 -0600
Subject: [PATCH 1/5] naive attempt

---
 package-lock.json |  5 +++++
 package.json      |  1 +
 server/index.js   | 11 ++++++++---
 server/rollup.js  |  6 +++++-
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 99d4423..ae11c70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -644,6 +644,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "dotenv": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
diff --git a/package.json b/package.json
index 7b3d5dd..c801328 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "postversion": "npm run changelog"
   },
   "dependencies": {
+    "dotenv": "^8.2.0",
     "prop-types": "15.x",
     "react-textarea-autosize": "^7.1.0"
   },
diff --git a/server/index.js b/server/index.js
index ff7729d..26534d6 100644
--- a/server/index.js
+++ b/server/index.js
@@ -3,6 +3,9 @@ const app = express();
 
 const { getBundle } = require('./rollup');
 const { serveTest } = require('../test/remote-component/server');
+const dotenv = require('dotenv');
+
+dotenv.config();
 
 const globals = {
   react: 'React',
@@ -12,22 +15,24 @@ const globals = {
   'react-textarea-autosize': 'TextareaAutosize',
 };
 
+const appRoot = process.env.RUNNING_LOCALLY ? 'shared-components' : 'app';
+
 app.use(express.static('public'));
 app.use(function(req, res, next) {
   res.header('Access-Control-Allow-Origin', '*');
   res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
   next();
 });
-
+ 
 app.get('/stories.js', async (req, res) => {
-  const output = await getBundle('/app/lib/stories.js', { format: 'iife', output: { name: 'glitchComponentLibrary' }, globals });
+  const output = await getBundle(`/${appRoot}/lib/stories.js`, { format: 'iife', output: { name: 'glitchComponentLibrary' }, globals });
   res.type('js');
   res.send(output);
 });
 
 app.get('/module.js', async (req, res) => {
   const fullUrl = `https://${req.get('host')}${req.originalUrl}`;
-  const output = await getBundle('/app/lib/index.js', {
+  const output = await getBundle(`/${appRoot}/lib/index.js`, {
     format: 'umd',
     name: 'glitchComponentLibrary',
     amd: { id: fullUrl, define: 'defineSharedComponent' },
diff --git a/server/rollup.js b/server/rollup.js
index 054ac97..19fd76d 100644
--- a/server/rollup.js
+++ b/server/rollup.js
@@ -2,6 +2,10 @@ const rollup = require('rollup');
 
 const rollupConfig = require('../rollup.config');
 const { watchFiles } = require('./watch');
+const dotenv = require('dotenv');
+
+dotenv.config();
+const appRoot = process.env.RUNNING_LOCALLY ? 'shared-components' : 'app';
 
 async function build({ filePath, bundleOptions, additionalConfig = {} }) {
   const bundle = await rollup.rollup({
@@ -16,7 +20,7 @@ async function build({ filePath, bundleOptions, additionalConfig = {} }) {
   return {
     code,
     filesToWatch: Object.keys(modules)
-      .filter((fileName) => fileName.startsWith('/app/'))
+      .filter((fileName) => fileName.startsWith(`/${appRoot}/`))
       .sort(),
   };
 }

From bb7ad372eef3cb4b7480de3664351966dc507e13 Mon Sep 17 00:00:00 2001
From: Cassey Lottman <>
Date: Mon, 4 Nov 2019 14:14:20 -0600
Subject: [PATCH 2/5] remove hard-coded app/ path

---
 server/index.js  | 7 +++----
 server/rollup.js | 6 +-----
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/server/index.js b/server/index.js
index 26534d6..7fbbadf 100644
--- a/server/index.js
+++ b/server/index.js
@@ -1,5 +1,6 @@
 const express = require('express');
 const app = express();
+const path = require('path');
 
 const { getBundle } = require('./rollup');
 const { serveTest } = require('../test/remote-component/server');
@@ -15,8 +16,6 @@ const globals = {
   'react-textarea-autosize': 'TextareaAutosize',
 };
 
-const appRoot = process.env.RUNNING_LOCALLY ? 'shared-components' : 'app';
-
 app.use(express.static('public'));
 app.use(function(req, res, next) {
   res.header('Access-Control-Allow-Origin', '*');
@@ -25,14 +24,14 @@ app.use(function(req, res, next) {
 });
  
 app.get('/stories.js', async (req, res) => {
-  const output = await getBundle(`/${appRoot}/lib/stories.js`, { format: 'iife', output: { name: 'glitchComponentLibrary' }, globals });
+  const output = await getBundle(path.resolve(__dirname, '../lib/stories.js'), { format: 'iife', output: { name: 'glitchComponentLibrary' }, globals });
   res.type('js');
   res.send(output);
 });
 
 app.get('/module.js', async (req, res) => {
   const fullUrl = `https://${req.get('host')}${req.originalUrl}`;
-  const output = await getBundle(`/${appRoot}/lib/index.js`, {
+  const output = await getBundle(path.resolve(__dirname, '../lib/index.js'), {
     format: 'umd',
     name: 'glitchComponentLibrary',
     amd: { id: fullUrl, define: 'defineSharedComponent' },
diff --git a/server/rollup.js b/server/rollup.js
index 19fd76d..81bae52 100644
--- a/server/rollup.js
+++ b/server/rollup.js
@@ -2,10 +2,6 @@ const rollup = require('rollup');
 
 const rollupConfig = require('../rollup.config');
 const { watchFiles } = require('./watch');
-const dotenv = require('dotenv');
-
-dotenv.config();
-const appRoot = process.env.RUNNING_LOCALLY ? 'shared-components' : 'app';
 
 async function build({ filePath, bundleOptions, additionalConfig = {} }) {
   const bundle = await rollup.rollup({
@@ -20,7 +16,7 @@ async function build({ filePath, bundleOptions, additionalConfig = {} }) {
   return {
     code,
     filesToWatch: Object.keys(modules)
-      .filter((fileName) => fileName.startsWith(`/${appRoot}/`))
+      .filter((fileName) => fileName.startsWith(__dirname))
       .sort(),
   };
 }

From 99d72e6931628bd6b38a1c442b66f601f587fa39 Mon Sep 17 00:00:00 2001
From: Cassey Lottman <>
Date: Mon, 4 Nov 2019 14:15:06 -0600
Subject: [PATCH 3/5] add .env to gitignore

---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 16d8d68..6ed9f88 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 build/
-node_modules/
\ No newline at end of file
+node_modules/
+.env
\ No newline at end of file

From 56c3164ad72d37c53885edc61baf6d03148595a0 Mon Sep 17 00:00:00 2001
From: Cassey Lottman <>
Date: Thu, 7 Nov 2019 10:13:51 -0600
Subject: [PATCH 4/5] add documentation

---
 .sample.env | 1 +
 README.md   | 5 +++++
 2 files changed, 6 insertions(+)
 create mode 100644 .sample.env

diff --git a/.sample.env b/.sample.env
new file mode 100644
index 0000000..c4c6a53
--- /dev/null
+++ b/.sample.env
@@ -0,0 +1 @@
+PORT=5555
\ No newline at end of file
diff --git a/README.md b/README.md
index c487858..343be14 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,11 @@ This package also renders its own documentation and development environment.
 
 **TODO** explain how glitch remix / pull request flow works, use docs from community site
 
+### Running off Glitch
+If you'd like to work on this project off Glitch, clone the repository, then run `npm install` to setup the dependencies. Run `npm start` to start the server. 
+
+You may wish to add a .env file so that the project consistently starts on the same port. See .sample.env for an example. 
+
 ### Remote components
 While you are building or updating a component in this library, you may wish to see it in the context of your application. This package exports the helper `createRemoteComponent` that loads a development version of the library from a URL. For example:
 

From 079399d5d8dd0a2ceea4beeb9801af70a0156f31 Mon Sep 17 00:00:00 2001
From: Cassey Lottman <>
Date: Thu, 7 Nov 2019 10:58:26 -0600
Subject: [PATCH 5/5] update to 'running locally'

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 343be14..efb74a7 100644
--- a/README.md
+++ b/README.md
@@ -27,8 +27,8 @@ This package also renders its own documentation and development environment.
 
 **TODO** explain how glitch remix / pull request flow works, use docs from community site
 
-### Running off Glitch
-If you'd like to work on this project off Glitch, clone the repository, then run `npm install` to setup the dependencies. Run `npm start` to start the server. 
+### Running Locally
+If you'd like to work on this project locally, clone the repository, then run `npm install` to setup the dependencies. Run `npm start` to start the server. 
 
 You may wish to add a .env file so that the project consistently starts on the same port. See .sample.env for an example.