Skip to content

Commit 56089a2

Browse files
Merge pull request #31 from jonocr/prod
Server and Electron prod builder
2 parents cfd5ce4 + 09be224 commit 56089a2

File tree

15 files changed

+84
-68
lines changed

15 files changed

+84
-68
lines changed

app/electron/main.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ async function createWindow() {
7272
// icon: path.join(__dirname, '../src/public/icons/png/256x256.png'),
7373
webPreferences: {
7474
zoomFactor: 0.7,
75-
// enable devtools when in development mode
75+
// enable devtools when in development mode
7676
devTools: true,
7777
// crucial security feature - blocks rendering process from having access to node modules
7878
nodeIntegration: false,
@@ -132,7 +132,7 @@ async function createWindow() {
132132
});
133133
}
134134

135-
// Emitted when the window is closed.
135+
// Emitted when the window is closed.
136136
win.on('closed', () => {
137137
// Dereference the window object, usually you would store windows
138138
// in an array if your app supports multi windows, this is the time
@@ -224,6 +224,7 @@ app.on('web-contents-created', (event, contents) => {
224224
const parsedUrl = new URL(navigationUrl);
225225
const validOrigins = [
226226
selfHost,
227+
'https://reactype-caret.herokuapp.com',
227228
'http://localhost:5000',
228229
'https://reactype.herokuapp.com',
229230
'https://github.com',
@@ -247,6 +248,7 @@ app.on('web-contents-created', (event, contents) => {
247248
const parsedUrl = new URL(navigationUrl);
248249
const validOrigins = [
249250
selfHost,
251+
'https://reactype-caret.herokuapp.com',
250252
'http://localhost:5000',
251253
'https://reactype.herokuapp.com',
252254
'https://github.com',
@@ -289,6 +291,7 @@ app.on('web-contents-created', (event, contents) => {
289291
const parsedUrl = new URL(navigationUrl);
290292
const validOrigins = [
291293
selfHost,
294+
'https://reactype-caret.herokuapp.com',
292295
'http://localhost:5000',
293296
'https://reactype.herokuapp.com',
294297
'https://nextjs.org',
@@ -352,7 +355,7 @@ ipcMain.on('choose_app_dir', (event) => {
352355
});
353356

354357
// define serverURL for cookie and auth purposes based on environment
355-
let serverUrl = 'https://reactype.herokuapp.com';
358+
let serverUrl = 'https://reactype-caret.herokuapp.com';
356359
if (isDev) {
357360
serverUrl = 'http://localhost:5000';
358361
}

app/src/components/bottom/StylesEditor.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import Fab from '@material-ui/core/Fab';
1616
import SaveIcon from '@material-ui/icons/Save';
1717
import cssRefresher from '../../helperFunctions/cssRefresh';
1818

19+
const serverURL = 'https://reactype-caret.herokuapp.com';
20+
1921
const StylesEditor: React.FC<{
2022
theme: string | null;
2123
setTheme: any | null;
@@ -32,7 +34,7 @@ const StylesEditor: React.FC<{
3234
'Content-Type': 'text/css',
3335
Accept: 'text/css',
3436
});
35-
fetch('/demoRender', {
37+
fetch(`${serverURL}/demoRender`, {
3638
headers: myHeaders,
3739
})
3840
.then(response => response.text())
@@ -46,7 +48,7 @@ const StylesEditor: React.FC<{
4648
// const myHeaders = new Headers({
4749
// headers: { 'Content-Type': 'application/json' },
4850
// });
49-
fetch('/user-styles/save', {
51+
fetch(`${serverURL}/user-styles/save`, {
5052
method: 'POST',
5153
headers: { 'Content-Type': 'application/json' },
5254
body: JSON.stringify({ data: css }),

app/src/helperFunctions/auth.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const fetch = require('node-fetch');
22

33
const isDev = process.env.NODE_ENV === 'development';
4-
let serverURL = 'https://reactype.herokuapp.com';
4+
let serverURL = 'https://reactype-caret.herokuapp.com';
55
if (isDev) {
66
serverURL = 'http://localhost:5000';
77
}

app/src/helperFunctions/cssRefresh.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const cssRefresher = () => {
77
const newStylesheet = document.createElement("LINK");
88
newStylesheet.setAttribute("rel", "stylesheet")
99
newStylesheet.setAttribute("type", "text/css");
10-
newStylesheet.setAttribute("href", `/demoRender?${rando}`);
10+
newStylesheet.setAttribute("href", `https://reactype-caret.herokuapp.com/demoRender?${rando}`);
1111
newStylesheet.setAttribute("id", 'Render Stylesheet');
1212
document.getElementById('renderFocus').append(newStylesheet);
1313
}

app/src/helperFunctions/generateCode.ts

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@ const generateUnformattedCode = (
9292
// function to dynamically add classes, ids, and styles to an element if it exists.
9393
const elementTagDetails = (childElement: object) => {
9494
let customizationDetails = "";
95-
if (childElement.childId) customizationDetails += (' ' + `id=${childElement.childId}`);
96-
if (childElement.attributes && childElement.attributes.cssClasses) customizationDetails += (' ' + `className=${childElement.attributes.cssClasses}`);
95+
if (childElement.childId) customizationDetails += (' ' + `id="${+childElement.childId}"`);
96+
if (childElement.attributes && childElement.attributes.cssClasses) customizationDetails += (' ' + `className="${childElement.attributes.cssClasses}"`);
9797
if (childElement.style && Object.keys(childElement.style).length > 0) customizationDetails +=(' ' + formatStyles(childElement));
9898
return customizationDetails;
9999
};
@@ -124,9 +124,9 @@ const generateUnformattedCode = (
124124
childElement.tag === 'li';
125125

126126
if (childElement.tag === 'img') {
127-
return `${levelSpacer(level, 5)}<${childElement.tag} src=${activeLink} ${elementTagDetails(childElement)}/>${levelSpacer(2, (3 + level))}`;
127+
return `${levelSpacer(level, 5)}<${childElement.tag} src="${activeLink}" ${elementTagDetails(childElement)}/>${levelSpacer(2, (3 + level))}`;
128128
} else if (childElement.tag === 'a') {
129-
return `${levelSpacer(level, 5)}<${childElement.tag} href=${activeLink} ${elementTagDetails(childElement)}>${innerText}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
129+
return `${levelSpacer(level, 5)}<${childElement.tag} href="${activeLink}" ${elementTagDetails(childElement)}>${innerText}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
130130
} else if (childElement.tag === 'input') {
131131
return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}></${childElement.tag}>${levelSpacer(2, (3 + level))}`;
132132
} else if (nestable) {
@@ -141,26 +141,27 @@ const generateUnformattedCode = (
141141
// write all code that will be under the "return" of the component
142142
const writeNestedElements = (enrichedChildren: any, level: number = 2) => {
143143
return `${enrichedChildren
144-
.map((child: any) => {
145-
if (child.type === 'Component') {
146-
return `<${child.name} ${elementTagDetails(child)} />`;
147-
} else if (child.type === 'HTML Element') {
148-
return elementGenerator(child, level);
149-
}
150-
// route links are for gatsby.js and next.js feature. if the user creates a route link and then switches projects, generate code for a normal link instead
151-
else if (child.type === 'Route Link') {
152-
if (projectType === 'Next.js') {
153-
// if route link points to index, to go endpoint / rather than /index
154-
if (child.name === 'index') return `<div><Link href="/"><a>${child.name}</a></Link></div>`;
155-
else return `<div><Link href="/${child.name}"><a>${child.name}</a></Link></div>`;
156-
} else if (projectType === 'Gatsby.js') {
157-
if (child.name === 'index') return `<div><Link to="/">${child.name}</Link></div>`;
158-
else return `<div><Link to="/${child.name}">${child.name}</Link></div>`;
159-
} else return `<div><a>${child.name}</a></div>`
160-
}
161-
})
162-
.filter(element => !!element)
163-
.join('')}`;
144+
.map((child: any) => {
145+
if (child.type === 'Component') {
146+
return `<${child.name} ${elementTagDetails(child)} />`;
147+
} else if (child.type === 'HTML Element') {
148+
return elementGenerator(child, level);
149+
}
150+
// route links are for gatsby.js and next.js feature. if the user creates a route link and then switches projects, generate code for a normal link instead
151+
else if (child.type === 'Route Link') {
152+
if (projectType === 'Next.js') {
153+
// if route link points to index, to go endpoint / rather than /index
154+
if (child.name === 'index') return `<div><Link href="/"><a>${child.name}</a></Link></div>`;
155+
else return `<div><Link href="/${child.name}"><a>${child.name}</a></Link></div>`;
156+
} else if (projectType === 'Gatsby.js') {
157+
if (child.name === 'index') return `<div><Link to="/">${child.name}</Link></div>`;
158+
else return `<div><Link to="/${child.name}">${child.name}</Link></div>`;
159+
} else return `<div><a>${child.name}</a></div>`
160+
}
161+
})
162+
.filter(element => !!element)
163+
.join('')
164+
}`;
164165
};
165166

166167
const writeStateProps = (stateArray: any) => {
@@ -209,21 +210,21 @@ const generateUnformattedCode = (
209210
? `class ${currentComponent.name} extends Component {`
210211
: `const ${currentComponent.name} = (props): JSX.Element => {`
211212
}
212-
${
213-
stateful && !classBased
214-
? `const [value, setValue] = useState<any | undefined>("INITIAL VALUE");${writeStateProps(currentComponent.useStateCodes)};
215-
`
216-
: ``
217-
}
218-
${
219-
classBased && stateful
220-
? `constructor(props) {
221-
super(props);
222-
this.state = {}
223-
}`
224-
: ``
225-
}
226-
${classBased ? `render(): JSX.Element {` : ``}
213+
${
214+
stateful && !classBased
215+
? `const [value, setValue] = useState<any | undefined>("INITIAL VALUE")${writeStateProps(currentComponent.useStateCodes)};
216+
`
217+
: ``
218+
}
219+
${
220+
classBased && stateful
221+
? `constructor(props) {
222+
super(props);
223+
this.state = {}
224+
}`
225+
: ``
226+
}
227+
${classBased ? `render(): JSX.Element {` : ``}
227228
228229
return (
229230
<div className="${currentComponent.name}" style={props.style}>
@@ -252,8 +253,8 @@ const generateUnformattedCode = (
252253
${
253254
isRoot
254255
? `<Head>
255-
<title>${currentComponent.name}</title>
256-
</Head>`
256+
<title>${currentComponent.name}</title>
257+
</Head>`
257258
: ``
258259
}
259260
<div className="${currentComponent.name}" style={props.style}>
@@ -283,8 +284,8 @@ const generateUnformattedCode = (
283284
${
284285
isRoot
285286
? `<head>
286-
<title>${currentComponent.name}</title>
287-
</head>`
287+
<title>${currentComponent.name}</title>
288+
</head>`
288289
: ``
289290
}
290291
<div className="${currentComponent.name}" style={props.style}>
@@ -313,9 +314,9 @@ const formatCode = (code: string) => {
313314
parser: 'babel'
314315
});
315316
} else if (process.env.NODE_ENV === 'production') {
316-
//return window.api.formatCode(code);
317+
return window.api.formatCode(code);
317318
} else {
318-
return code;
319+
return code;
319320
}
320321
};
321322

app/src/helperFunctions/projectGetSaveDel.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const isDev = process.env.NODE_ENV === 'development';
2-
let serverURL = 'https://reactype.herokuapp.com';
2+
let serverURL = 'https://reactype-caret.herokuapp.com';
33
if (isDev) {
44
serverURL = 'http://localhost:5000';
55
}

app/src/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ import ProjectDashboard from './Dashboard/ProjectContainer.tsx';
1919
import styles from './Dashboard/styles.css';
2020

2121
const client = new ApolloClient({
22-
uri: 'http://localhost:5000/graphql',
22+
// uri: 'http://localhost:5000/graphql',
23+
uri: 'https://reactype-caret.herokuapp.com/graphql',
2324
cache: new InMemoryCache()
2425
});
2526

package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@
4242
"dev-server": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack.development.js",
4343
"dev": "concurrently --success first \"cross-env NODE_ENV=development webpack-dev-server --config ./webpack.development.js\" \"cross-env NODE_ENV=development electron .\" \"npm run server\" -k",
4444
"p": "concurrently --success first \"npm run dev-server\" \"cross-env NODE_ENV=production electron .\" \"nodemon server/server.js\" -k",
45-
"prod-build": "cross-env NODE_ENV=production npx webpack --mode=production --config ./webpack.production.js",
46-
"prod": "npm run prod-build && electron . --no-sandbox",
45+
"prod-build": "cross-env NODE_ENV=production npx webpack --mode=production --config ./webpack.production.js",
46+
"prod": "npm run prod-build && electron . --no-sandbox",
4747
"pack": "electron-builder --dir",
4848
"dist": "npm run prod-build && electron-builder",
4949
"dist-mac": "npm run prod-build && electron-builder --mac",
@@ -58,7 +58,7 @@
5858
"url": "git+https://github.com/open-source-labs/ReacType.git"
5959
},
6060
"keywords": [
61-
"electron",
61+
"electron",
6262
"prototying",
6363
"react",
6464
"next.js"
@@ -127,6 +127,10 @@
127127
"cors": "^2.8.5",
128128
"d3": "^6.2.0",
129129
"dotenv": "^8.2.0",
130+
"electron-debug": "^3.1.0",
131+
"electron-devtools-installer": "^2.2.4",
132+
"electron-splashscreen": "^1.0.0",
133+
"electron-window-manager": "^1.0.6",
130134
"enzyme": "^3.4.1",
131135
"enzyme-adapter-react-16": "^1.2.0",
132136
"eslint-plugin-react-hooks": "^4.2.0",
@@ -182,10 +186,6 @@
182186
"css-loader": "^2.1.1",
183187
"dotenv-webpack": "^5.0.1",
184188
"electron": "^9.4.2",
185-
"electron-debug": "^3.1.0",
186-
"electron-devtools-installer": "^2.2.4",
187-
"electron-splashscreen": "^1.0.0",
188-
"electron-window-manager": "^1.0.6",
189189
"electron-builder": "^22.7.0",
190190
"enzyme-to-json": "^3.5.0",
191191
"eslint": "^4.19.1",
File renamed without changes.

server/controllers/userStylesController.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const userStylesController = {};
77
// Rewrite file
88
userStylesController.saveCssFile = (req, res, next) => {
99
const newText = req.body.data;
10-
fs.writeFile(path.join(__dirname, '../../app/src/components/main/renderDemo.css'), newText, 'utf-8', (err, data) => {
10+
fs.writeFile(path.join(__dirname, '../assets/renderDemo.css'), newText, 'utf-8', (err, data) => {
1111
if (err) throw err;
1212
console.log('CSS Updated!');
1313
next();

server/models/reactypeModels.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@
1010
*/
1111
const mongoose = require('mongoose');
1212
const bcrypt = require('bcryptjs');
13-
const config = require('../../config');
13+
const URI = process.env.NODE_ENV === 'production' ? process.env.URI : require('../../config').URI;
1414

1515
const SALT_WORK_FACTOR = 14;
1616
// connect to mongo db
1717
mongoose
18-
.connect(config.URI,
18+
.connect(URI,
1919
{
2020
// options for the connect method to parse the URI
2121
useNewUrlParser: true,

server/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"scripts": {
1111
"test": "jest --verbose ",
1212
"test:watch": "jest --watch",
13-
"start": "cross-env NODE_ENV=production nodemon server.js",
13+
"start": "cross-env NODE_ENV=production node server.js",
1414
"prod": "cross-env NODE_ENV=production server.js",
1515
"dev": "cross-env NODE_ENV=development nodemon server.js"
1616
},
@@ -20,13 +20,15 @@
2020
"author": "",
2121
"license": "ISC",
2222
"dependencies": {
23+
"apollo-server-express": "^2.24.0",
2324
"bcryptjs": "^2.4.3",
2425
"body-parser": "^1.19.0",
2526
"cookie-parser": "^1.4.5",
2627
"cors": "^2.8.5",
2728
"cross-env": "^7.0.2",
2829
"dotenv": "^8.2.0",
2930
"express": "^4.17.1",
31+
"graphql": "^15.5.0",
3032
"mongoose": "^5.9.22",
3133
"nodemon": "^2.0.4",
3234
"passport": "^0.4.1",

server/passport-setup.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const githubStrategy = require('passport-github2').Strategy;
66
const { Users } = require('./models/reactypeModels');
77
const PORT = require('./server.js');
88
const isDev = process.env.NODE_ENV === 'development';
9-
let serverUrl = 'https://reactype.herokuapp.com';
9+
let serverUrl = 'https://reactype-caret.herokuapp.com';
1010
if (isDev) {
1111
serverUrl = 'http://localhost:5000';
1212
}

server/server.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const resolvers = {
7676
Mutation,
7777
};
7878

79-
app.use('/demoRender', express.static(path.join(__dirname, '../app/src/components/main/renderDemo.css')));
79+
app.use('/demoRender', express.static(path.join(__dirname, './assets/renderDemo.css')));
8080

8181

8282
// Re-direct to route handlers:
@@ -129,6 +129,10 @@ app.delete(
129129
(req, res) => res.status(200).json(res.locals.deleted),
130130
);
131131

132+
app.get("/", function (req, res) {
133+
res.send("Houston, Caret is in orbit!");
134+
});
135+
132136
// catch-all route handler
133137
app.use('*', (req, res) => res.status(404).send('Page not found'));
134138

webpack.production.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ module.exports = merge(base, {
1212
// sets process.env.NODE_ENV to 'production'
1313
mode: 'production',
1414
// nosources-source-map exposes filenames/structure for stack traces but not the rest of the soruce cdoe
15-
devtool: 'nosources-source-map', //https://webpack.js.org/configuration/devtool/ && https://github.com/webpack/webpack/issues/5627#issuecomment-389492939
15+
// devtool: 'source-map', //https://webpack.js.org/configuration/devtool/ && https://github.com/webpack/webpack/issues/5627#issuecomment-389492939
16+
// optimization: {
17+
// minimize: false,
18+
// },
1619
plugins: [
1720
// miniCssExtractPlugin is included here because it's used as a loader in wepack.config.js
1821
new MiniCssExtractPlugin(),

0 commit comments

Comments
 (0)