Skip to content

Commit 7e6fd25

Browse files
ChristianEdwardPadillaChristianEdwardPadilla
committed
create app includes server and has fewer typos
1 parent fb43303 commit 7e6fd25

File tree

1 file changed

+186
-118
lines changed

1 file changed

+186
-118
lines changed

‎src/utils/createApplication.util.ts‎

Lines changed: 186 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,186 @@
1-
import fs from "fs";
2-
import { format } from "prettier";
3-
import componentRender from "./componentRender.util";
1+
import fs from 'fs';
2+
import { format } from 'prettier';
3+
import componentRender from './componentRender.util';
44

55
function createIndexHtml(path, appName) {
66
let dir = path;
77
let dirSrc;
8+
let dirServer;
89
let dirComponent;
910
if (!dir.match(/`${appName}`|\*$/)) {
1011
dir = `${dir}/${appName}`;
1112
if (!fs.existsSync(dir)) {
1213
fs.mkdirSync(dir);
1314
dirSrc = `${dir}/src`;
1415
fs.mkdirSync(dirSrc);
16+
dirServer = `${dir}/server`;
17+
fs.mkdirSync(dirServer);
1518
dirComponent = `${dirSrc}/components`;
1619
fs.mkdirSync(dirComponent);
1720
}
1821
}
1922

2023
const filePath: string = `${dir}/index.html`;
2124
const data: string = `
22-
<!DOCTYPE html>
23-
<html lang="en">
24-
<head>
25-
<meta charset="UTF-8">
26-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
27-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
28-
<title>Document</title>
29-
</head>
30-
<body>
31-
<div id='root'></div>
32-
<script src='bundle.js'></script>
33-
</body>
34-
</html>
25+
<!DOCTYPE html>
26+
<html lang="en">
27+
<head>
28+
<meta charset="UTF-8" />
29+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
30+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
31+
<title>ReacType App</title>
32+
</head>
33+
<body>
34+
<div id="root"></div>
35+
<script src="./build/bundle.js"></script>
36+
</body>
37+
</html>
3538
`;
36-
fs.writeFileSync(filePath, data, err => {
39+
fs.writeFileSync(filePath, data, (err) => {
3740
if (err) {
38-
console.log("index.html error:", err.message);
41+
console.log('index.html error:', err.message);
3942
} else {
40-
console.log("index.html written successfully");
43+
console.log('index.html written successfully');
4144
}
4245
});
4346
}
4447

4548
export const createIndexTsx = (path, appName) => {
46-
const filePath = `${path}/${appName}/index.tsx`;
49+
const filePath = `${path}/${appName}/src/index.tsx`;
4750
const data = `
48-
import React from 'react';
49-
import ReactDOM form 'react-dom'
50-
51-
export default function App(): JSX.Element {
52-
const greeting = (a: string, b: string): string => a + b;
53-
return (
54-
<h1>{greeting('hello ', 'world')}</h1>
55-
)
56-
}
57-
58-
const root = document.getElementById('root')
51+
import * as React from 'react';
52+
import * as ReactDOM from 'react-dom';
5953
60-
ReactDOM.render(<App />, root)
54+
import { App } from './components/App';
55+
56+
ReactDOM.render(<App />, document.getElementById('root'));
6157
`;
62-
fs.writeFile(filePath, data, err => {
58+
fs.writeFile(filePath, data, (err) => {
6359
if (err) {
64-
console.log("index.tsx error:", err.message);
60+
console.log('index.tsx error:', err.message);
6561
} else {
66-
console.log("index.tsx written successfully");
62+
console.log('index.tsx written successfully');
6763
}
6864
});
6965
};
7066

7167
export const createPackage = (path, appName) => {
7268
const filePath = `${path}/${appName}/package.json`;
7369
const data = `
74-
{
75-
"name": "reacType-boiler-plate",
76-
"version": "1.0.0",
77-
"description": "",
78-
"main": "index.tsx",
79-
"scripts": {
80-
"start": "webpack-dev-server --open",
81-
"build": "webpack"
82-
},
83-
"keywords": [],
84-
"author": "",
85-
"license": "MIT",
86-
"depenencies": {
87-
"react": "^16.4.1",
88-
"react-dom": "^16.4.1",
89-
},
90-
"devDependencies": {
91-
"@babel/preset-typescript": "^7.3.3",
92-
"@types/react": "^16.8.14",
93-
"@types/react-dom": "^16.8.4",
94-
"babel-core": "^6.26.3",
95-
"babel-eslint": "^8.2.6",
96-
"babel-loader": "^7.1.4",
97-
"babel-preset-env": "^1.6.1",
98-
"babel-preset-react": "^6.24.1",
99-
"typescript": "^3.4.4",
100-
"webpack": "^4.4.0",
101-
"webpack-cli": "^3.3.0",
102-
"webpack-dev-server": "^3.3.1"
103-
}
104-
}
70+
{
71+
"name": "reactype",
72+
"version": "1.0.0",
73+
"description": "",
74+
"main": "index.js",
75+
"scripts": {
76+
"start": "node server/server.js",
77+
"build": "webpack",
78+
"dev": "nodemon server/server.js & webpack-dev-server --open"
79+
},
80+
"nodemonConfig": {
81+
"ignore": [
82+
"build",
83+
"src"
84+
]
85+
},
86+
"keywords": [],
87+
"author": "",
88+
"license": "MIT",
89+
"depenencies": {
90+
"@types/react": "^16.8.13",
91+
"@types/react-dom": "^16.8.4",
92+
"express": "^4.16.4",
93+
"react": "^16.8.6",
94+
"react-dom": "^16.8.6",
95+
"webpack": "^4.29.6"
96+
},
97+
"devDependencies": {
98+
"@babel/core": "^7.4.3",
99+
"@babel/preset-env": "^7.4.3",
100+
"@babel/preset-react": "^7.0.0",
101+
"@babel/preset-typescript": "^7.3.3",
102+
"babel-loader": "^8.0.5",
103+
"cross-env": "^5.2.0",
104+
"css-loader": "^2.1.1",
105+
"file-loader": "^3.0.1",
106+
"isomorphic-fetch": "^2.2.1",
107+
"node-sass": "^4.11.0",
108+
"nodemon": "^1.18.9",
109+
"postcss-loader": "^3.0.0",
110+
"sass-loader": "^7.1.0",
111+
"source-map-loader": "^0.2.4",
112+
"style-loader": "^0.23.1",
113+
"tslint": "^5.15.0",
114+
"tslint-config-prettier": "^1.18.0",
115+
"tslint-react": "^4.0.0",
116+
"typescript": "^3.4.3",
117+
"webpack": "^4.29.6",
118+
"webpack-cli": "^3.3.0",
119+
"webpack-dev-server": "^3.2.1"
120+
}
121+
}
105122
`;
106-
fs.writeFile(filePath, data, err => {
123+
fs.writeFile(filePath, data, (err) => {
107124
if (err) {
108-
console.log("package.json error:", err.message);
125+
console.log('package.json error:', err.message);
109126
} else {
110-
console.log("package.json written successfully");
127+
console.log('package.json written successfully');
111128
}
112129
});
113130
};
114131

115132
export const createWebpack = (path, appName) => {
116133
const filePath = `${path}/${appName}/webpack.config.js`;
117134
const data = `
118-
const path = require('path');
119-
const rules = [
120-
{
121-
test: /\.tsx?/,
122-
exclude: /node_modules/,
123-
loader: 'babel-loader'
124-
}
125-
]
126-
127-
module.exports = {
128-
target: 'web',
129-
mode: 'development',
130-
entry: './index.tsx',
131-
output: {
132-
path: path.resolve(__dirname, 'build'),
133-
filename: 'bundle.js'
134-
},
135-
module: { rules },
136-
resolve: {extensions: ['.ts', '.tsx', '.js', '.jsx']},
137-
devServer: {
138-
contentBase: './',
139-
port: 5000
140-
}
141-
}
135+
var status = process.env.NODE_ENV; //taken from script so we don't have to flip mode when using development/production
136+
var path = require('path');
137+
138+
module.exports = {
139+
entry: './src/index.tsx',
140+
output: {
141+
path: path.resolve(__dirname, 'build'),
142+
filename: 'bundle.js',
143+
},
144+
145+
// Enable sourcemaps for debugging webpack's output.
146+
devtool: 'source-map',
147+
148+
resolve: {
149+
// Add '.ts' and '.tsx' as resolvable extensions.
150+
extensions: ['.ts', '.tsx', '.js', '.json'],
151+
},
152+
mode: status,
153+
devServer: {
154+
publicPath: '/build/',
155+
// proxy: {
156+
// '/testDev': 'http://localhost:3000',
157+
// },
158+
},
159+
160+
module: {
161+
rules: [
162+
// All files with a '.ts' or '.tsx' extension will be handled by babel-loader
163+
{ test: /.tsx?$/, exclude: /node-modules/, loader: 'babel-loader' },
164+
165+
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
166+
{ enforce: 'pre', test: /.js$/, exclude: /node-modules/, loader: 'source-map-loader' },
167+
{
168+
test: /.scss$/,
169+
use: [
170+
'style-loader', // creates style nodes from JS strings
171+
'css-loader', // translates CSS into CommonJS
172+
'sass-loader', // compiles Sass to CSS, using Node Sass by default
173+
],
174+
},
175+
],
176+
},
177+
};
142178
`;
143-
fs.writeFile(filePath, data, err => {
179+
fs.writeFile(filePath, data, (err) => {
144180
if (err) {
145-
console.log("webpack error:", err.message);
181+
console.log('webpack error:', err.message);
146182
} else {
147-
console.log("webpack written successfully");
183+
console.log('webpack written successfully');
148184
}
149185
});
150186
};
@@ -156,48 +192,79 @@ export const createBabel = (path, appName) => {
156192
"presets": ["@babel/env", "@babel/react", "@babel/typescript"]
157193
}
158194
`;
159-
fs.writeFile(filePath, data, err => {
195+
fs.writeFile(filePath, data, (err) => {
160196
if (err) {
161-
console.log("babelrc error:", err.message);
197+
console.log('babelrc error:', err.message);
162198
} else {
163-
console.log("babelrc written successfully");
199+
console.log('babelrc written successfully');
164200
}
165201
});
166202
};
167203

168204
export const createTsConfig = (path, appName) => {
169205
const filePath = `${path}/${appName}/tsconfig.json`;
170206
const data = `
171-
{
172-
"compilerOptions": {
173-
"outDir": "./build/",
174-
"sourceMap": true,
175-
"noImplicitAny": true,
176-
"module": "commonjs",
177-
"target": "es6",
178-
"jsx": "react"
179-
},
180-
"include": ["**/*.ts", "**/*.tsx"],
181-
"exclude": ["node_modules"]
182-
}
207+
{
208+
"compilerOptions": {
209+
"outDir": "./build/",
210+
"sourceMap": true,
211+
"noImplicitAny": true,
212+
"module": "commonjs",
213+
"target": "es6",
214+
"jsx": "react"
215+
},
216+
"include": ["./src/**/*"],
217+
"exclude": ["node_modules"]
218+
}
219+
`;
220+
fs.writeFile(filePath, data, (err) => {
221+
if (err) {
222+
console.log('TSConfig error:', err.message);
223+
} else {
224+
console.log('TSConfig written successfully');
225+
}
226+
});
227+
};
228+
229+
export const createServer = (path, appName) => {
230+
const filePath = `${path}/${appName}/server/server.js`;
231+
const data = `
232+
const express = require('express');
233+
const path = require('path');
234+
const app = express();
235+
236+
app.get('/testDev', (req, res) => {
237+
res.send({ dev: 'testDev endpoint hit' });
238+
});
239+
240+
// statically serve everything in the build folder on the route '/build'
241+
app.use('/build', express.static(path.join(__dirname, '../build')));
242+
// serve index.html on the route '/'
243+
app.get('/', (req, res) => {
244+
res.sendFile(path.join(__dirname, '../index.html'));
245+
});
246+
247+
app.listen(3000, () => {
248+
console.log('listening on port 3000');
249+
}); //listens on port 3000 -> http://localhost:3000/
183250
`;
184-
fs.writeFile(filePath, data, err => {
251+
fs.writeFile(filePath, data, (err) => {
185252
if (err) {
186-
console.log("TSConfig error:", err.message);
253+
console.log('server file error:', err.message);
187254
} else {
188-
console.log("TSConfig written successfully");
255+
console.log('server file written successfully');
189256
}
190257
});
191258
};
192259

193260
async function createApplicationUtil({
194261
path,
195262
appName,
196-
genOption
263+
genOption,
197264
}: {
198-
path: string;
199-
appName: string;
200-
genOption: number;
265+
path: string;
266+
appName: string;
267+
genOption: number;
201268
}) {
202269
if (genOption === 1) {
203270
await createIndexHtml(path, appName);
@@ -206,6 +273,7 @@ async function createApplicationUtil({
206273
await createWebpack(path, appName);
207274
await createBabel(path, appName);
208275
await createTsConfig(path, appName);
276+
await createServer(path, appName);
209277
}
210278
}
211279
export default createApplicationUtil;

0 commit comments

Comments
 (0)