replaced all static port names with variables to easily switch ports during development

Author: calvincao

app/electron/main.js

@@ -213,7 +213,7 @@ app.on('web-contents-created', (event, contents) => {
     const validOrigins = [
       selfHost,
       'https://reactype-caret.herokuapp.com',
-      'http://localhost:5000',
+      `http://localhost:${process.env.PORT}`,
       'https://reactype.herokuapp.com',
       'https://github.com',
       'https://nextjs.org',
@@ -237,7 +237,7 @@ app.on('web-contents-created', (event, contents) => {
     const validOrigins = [
       selfHost,
       'https://reactype-caret.herokuapp.com',
-      'http://localhost:5000',
+      `http://localhost:${process.env.PORT}`,
       'https://reactype.herokuapp.com',
       'https://github.com',
       'https://nextjs.org',
@@ -280,7 +280,7 @@ app.on('web-contents-created', (event, contents) => {
     const validOrigins = [
       selfHost,
       'https://reactype-caret.herokuapp.com',
-      'http://localhost:5000',
+      `http://localhost:${process.env.PORT}`,
       'https://reactype.herokuapp.com',
       'https://nextjs.org',
       'https://developer.mozilla.org',
@@ -345,7 +345,7 @@ ipcMain.on('choose_app_dir', event => {
 // define serverURL for cookie and auth purposes based on environment
 let serverUrl = 'https://reactype-caret.herokuapp.com';
 if (isDev) {
-  serverUrl = 'http://localhost:5000';
+  serverUrl = `http://localhost:${process.env.PORT}`;
 }
 
 // // for github oauth login in production, since cookies are not accessible through document.cookie on local filesystem, we need electron to grab the cookie that is set from oauth, this listens for an set cookie event from the renderer process then sends back the cookie
@@ -376,7 +376,7 @@ ipcMain.on('delete_cookie', event => {
 // opens new window for github oauth when button on sign in page is clicked
 ipcMain.on('github', event => {
   console.log('inside main.js in electron');
-  const githubURL = 'http://localhost:5000/auth/github';
+  const githubURL = `http://localhost:${process.env.PORT}/auth/github`;
   const options = {
     client_id: process.env.GITHUB_ID,
     client_secret: process.env.GITHUB_SECRET,

app/src/helperFunctions/auth.ts

@@ -2,7 +2,7 @@ const fetch = require('node-fetch');
 const isDev = process.env.NODE_ENV === 'development';
 let serverURL = 'https://reactype-caret.herokuapp.com';
 if (isDev) {
-  serverURL = 'http://localhost:5000';
+  serverURL = `http://localhost:${process.env.PORT}`;
 }
 export const sessionIsCreated = (
   username: string,

app/src/helperFunctions/projectGetSaveDel.ts

@@ -1,7 +1,7 @@
 const isDev = process.env.NODE_ENV === 'development';
 let serverURL = 'https://reactype-caret.herokuapp.com';
 if (isDev) {
-  serverURL = 'http://localhost:5000';
+  serverURL = `http://localhost:${process.env.PORT}`;
 }
 export const getProjects = (): Promise<any> => {
   let userId = window.localStorage.getItem('ssid');

server/README.md

@@ -15,6 +15,6 @@
 
 Redeployment should also be done with only the server subtree and not the entire repo. See this <a href="https://medium.com/@shalandy/deploy-git-subdirectory-to-heroku-ea05e95fce1f">article</a> about deploying just a subdirectory.
 
-If `npm` is your package manager, you just need to run the script `npm run dev` and it will start the server on `http://localhost:5000` for your development environment.
+If `npm` is your package manager, you just need to run the script `npm run dev` and it will start the server on `http://localhost:${process.env.PORT}` for your development environment.
 
 Endpoint testing is currently integrated with Jest and Supertest as well and can be run by `npm run test` or `npm run test:watch` for watch mode.

server/server.js

@@ -13,7 +13,7 @@ const projectController = require('./controllers/projectController');
 
 const app = express();
 
-const PORT = process.env.PORT || 5000;
+const PORT = process.env.PORT;
 const isDev = process.env.NODE_ENV === 'development';
 const isProd = process.env.NODE_ENV === 'production';
 const isTest = process.env.NODE_ENV === 'test';
@@ -43,7 +43,7 @@ passport.use(
     {
       clientID: process.env.GITHUB_ID,
       clientSecret: process.env.GITHUB_SECRET,
-      callbackURL: 'http://localhost:5000/github/callback'
+      callbackURL: `http://localhost:${process.env.PORT}/github/callback`
     },
     function(accessToken, refreshToken, profile, done) {
       console.log(profile);

webpack.development.js

@@ -18,16 +18,16 @@ module.exports = merge(base, {
     contentBase: path.resolve(__dirname, 'app/dist'), // Where we serve the local dev server's files from
     watchContentBase: true, // Watch the content base for changes
     watchOptions: {
-      ignored: /node_modules/ 
+      ignored: /node_modules/
     },
     proxy: {
       '/demoRender': {
-        target: 'http://localhost:5000/'
+        target: `http://localhost:${process.env.PORT}/`
       },
       '/user-styles': {
-        target: 'http://localhost:5000/'
-      },
-    },
+        target: `http://localhost:${process.env.PORT}/`
+      }
+    }
   },
   plugins: [
     // miniCssExtractPlugin is included here because it's used as a loader in wepack.config.js
@@ -39,5 +39,5 @@ module.exports = merge(base, {
       filename: 'index.html',
       nonce: nonce
     })
-  ],
+  ]
 });