Enable running shared-components locally

.gitignore

@@ -1,2 +1,3 @@
 build/
-node_modules/
+node_modules/
+.env

.sample.env

@@ -0,0 +1 @@
+PORT=5555

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 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. 
+
 ### 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:
 

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"
   },

server/index.js

@@ -1,8 +1,12 @@
 const express = require('express');
 const app = express();
+const path = require('path');
 
 const { getBundle } = require('./rollup');
 const { serveTest } = require('../test/remote-component/server');
+const dotenv = require('dotenv');
+
+dotenv.config();
 
 const globals = {
   react: 'React',
@@ -18,16 +22,16 @@ app.use(function(req, res, next) {
   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(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('/app/lib/index.js', {
+  const output = await getBundle(path.resolve(__dirname, '../lib/index.js'), {
     format: 'umd',
     name: 'glitchComponentLibrary',
     amd: { id: fullUrl, define: 'defineSharedComponent' },

server/rollup.js

@@ -16,7 +16,7 @@ async function build({ filePath, bundleOptions, additionalConfig = {} }) {
   return {
     code,
     filesToWatch: Object.keys(modules)
-      .filter((fileName) => fileName.startsWith('/app/'))
+      .filter((fileName) => fileName.startsWith(__dirname))
       .sort(),
   };
 }