image redirect working

Author: MikoGome

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:${process.env.PORT}`,
+      `http://localhost:${process.env.DEV_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:${process.env.PORT}`,
+      `http://localhost:${process.env.DEV_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:${process.env.PORT}`,
+      `http://localhost:${process.env.DEV_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:${process.env.PORT}`;
+  serverUrl = `http://localhost:${process.env.DEV_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 = isDev ? `http://localhost:${process.env.PORT}/auth/github` : 'app://rse/';
+  const githubURL = `http://localhost:${process.env.DEV_PORT}/auth/github`;
   const options = {
     client_id: process.env.GITHUB_ID,
     client_secret: process.env.GITHUB_SECRET,

app/src/components/main/DemoRender.tsx

@@ -42,8 +42,9 @@ const DemoRender = (): JSX.Element => {
               document.querySelectorAll('a').forEach(element => {
                 element.addEventListener('click', (event) => {
                   event.preventDefault();
-                  window.top.postMessage(event.target.href, '*');
-                })
+                  window.top.postMessage(event.currentTarget.href, '*');
+                  //document.body.style.backgroundColor = 'orange';
+                }, true)
               });
             } catch (err) {
               const app = document.querySelector('#app');
@@ -57,6 +58,7 @@ const DemoRender = (): JSX.Element => {
 
   //Switch between components when clicking on a link in the live render
   window.onmessage = (event) => {
+    if(event.data === undefined) return;
     const component = event.data?.split('/').at(-1);
     const componentId = component && state.components?.find((el) => {
       return el.name.toLowerCase() === component.toLowerCase();
@@ -70,7 +72,6 @@ const DemoRender = (): JSX.Element => {
   const componentBuilder = (array: object, key: number = 0) => {
     const componentsToRender = [];
     for (const element of array) {
-      console.log('array', array);
       if (element.name !== 'separator') {
         const elementType = element.name;
         const childId = element.childId;
@@ -112,7 +113,6 @@ const DemoRender = (): JSX.Element => {
   }, [])
 
   useEffect(() => {
-    console.log('code', code);
     iframe.current.contentWindow.postMessage(code, '*');
   }, [code])
 

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:${process.env.PORT}`;
+  serverURL = `http://localhost:${process.env.DEV_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:${process.env.PORT}`;
+  serverURL = `http://localhost:${process.env.DEV_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:${process.env.PORT}` 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.DEV_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;
+const PORT = process.env.PORT || process.env.DEV_PORT;
 const isDev = process.env.NODE_ENV === 'development';
 const isProd = process.env.NODE_ENV === 'production';
 const isTest = process.env.NODE_ENV === 'test';
@@ -29,7 +29,7 @@ const stylesRouter = require('./routers/stylesRouter');
 // options: origin: allows from localhost when in dev or the app://rse when using prod, credentials: allows credentials header from origin (needed to send cookies)
 app.use(
   cors({
-    origin: ['http://localhost:8080', 'app://rse'],
+    origin: [`http://localhost:8080`, 'app://rse'],
     credentials: true
   })
 );
@@ -43,7 +43,7 @@ passport.use(
     {
       clientID: process.env.GITHUB_ID,
       clientSecret: process.env.GITHUB_SECRET,
-      callbackURL: `http://localhost:${process.env.PORT}/github/callback`
+      callbackURL: `http://localhost:${process.env.DEV_PORT}/github/callback`
     },
     function(accessToken, refreshToken, profile, done) {
       console.log(profile);

webpack.development.js

@@ -22,10 +22,10 @@ module.exports = merge(base, {
     },
     proxy: {
       '/demoRender': {
-        target: `http://localhost:${process.env.PORT}/`
+        target: `http://localhost:${process.env.DEV_PORT}/`
       },
       '/user-styles': {
-        target: `http://localhost:${process.env.PORT}/`
+        target: `http://localhost:${process.env.DEV_PORT}/`
       }
     }
   },