Skip to content

Commit 43dd43c

Browse files
ChristianEdwardPadillaChristianEdwardPadilla
committed
create app includes server and has fewer typos
1 parent 21c1d2d commit 43dd43c

File tree

1 file changed

+182
-117
lines changed

1 file changed

+182
-117
lines changed

‎src/utils/createApplication.util.ts

Lines changed: 182 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,186 @@
1-
// import util from 'util';
2-
3-
// const execFile = util.promisify(require('child_process').execFile);
4-
5-
// Application generation options
6-
// cosnt genOptions = [
7-
// 'Export into existing project.', 'Export with starter repo', 'Export with create-react-app.'
8-
// ];
9-
10-
import fs from "fs";
11-
import { format } from "prettier";
12-
import componentRender from "./componentRender.util.ts";
1+
import fs from 'fs';
2+
import { format } from 'prettier';
3+
import componentRender from './componentRender.util';
134

145
function createIndexHtml(path, appName) {
156
let dir = path;
167
let dirSrc;
8+
let dirServer;
179
let dirComponent;
1810
if (!dir.match(/`${appName}`|\*$/)) {
1911
dir = `${dir}/${appName}`;
2012
if (!fs.existsSync(dir)) {
2113
fs.mkdirSync(dir);
2214
dirSrc = `${dir}/src`;
2315
fs.mkdirSync(dirSrc);
16+
dirServer = `${dir}/server`;
17+
fs.mkdirSync(dirServer);
2418
dirComponent = `${dirSrc}/components`;
2519
fs.mkdirSync(dirComponent);
2620
}
2721
}
2822

2923
const filePath: string = `${dir}/index.html`;
3024
const data: string = `
31-
<!DOCTYPE html>
32-
<html lang="en">
33-
<head>
34-
<meta charset="UTF-8">
35-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
36-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
37-
<title>Document</title>
38-
</head>
39-
<body>
40-
<div id='root'></div>
41-
<script src='bundle.js'></script>
42-
</body>
43-
</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>
4438
`;
4539
fs.writeFileSync(filePath, data, err => {
4640
if (err) {
47-
console.log("index.html error:", err.message);
41+
console.log('index.html error:', err.message);
4842
} else {
49-
console.log("index.html written successfully");
43+
console.log('index.html written successfully');
5044
}
5145
});
5246
}
5347

54-
async function createApplicationUtil({ path, appName, genOption }) {
55-
if (genOption === 1) {
56-
await createIndexHtml();
57-
}
58-
59-
const root = document.getElementById('root')
48+
export const createIndexTsx = (path, appName) => {
49+
const filePath = `${path}/${appName}/src/index.tsx`;
50+
const data = `
51+
import * as React from 'react';
52+
import * as ReactDOM from 'react-dom';
53+
54+
import { App } from './components/App';
6055
61-
ReactDOM.render(<App />, root)
56+
ReactDOM.render(<App />, document.getElementById('root'));
6257
`;
6358
fs.writeFile(filePath, data, err => {
6459
if (err) {
65-
console.log("index.tsx error:", err.message);
60+
console.log('index.tsx error:', err.message);
6661
} else {
67-
console.log("index.tsx written successfully");
62+
console.log('index.tsx written successfully');
6863
}
6964
});
7065
};
7166

7267
export const createPackage = (path, appName) => {
7368
const filePath = `${path}/${appName}/package.json`;
7469
const data = `
75-
{
76-
"name": "reacType-boiler-plate",
77-
"version": "1.0.0",
78-
"description": "",
79-
"main": "index.tsx",
80-
"scripts": {
81-
"start": "webpack-dev-server --open",
82-
"build": "webpack"
83-
},
84-
"keywords": [],
85-
"author": "",
86-
"license": "ISC",
87-
"depenencies": {
88-
"react": "^16.4.1",
89-
"react-dom": "^16.4.1",
90-
},
91-
"devDependencies": {
92-
"@babel/preset-typescript": "^7.3.3",
93-
"@types/react": "^16.8.14",
94-
"@types/react-dom": "^16.8.4",
95-
"babel-core": "^6.26.3",
96-
"babel-eslint": "^8.2.6",
97-
"babel-loader": "^7.1.4",
98-
"babel-preset-env": "^1.6.1",
99-
"babel-preset-react": "^6.24.1",
100-
"typescript": "^3.4.4",
101-
"webpack": "^4.4.0",
102-
"webpack-cli": "^3.3.0",
103-
"webpack-dev-server": "^3.3.1"
104-
}
105-
}
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+
}
106122
`;
107123
fs.writeFile(filePath, data, err => {
108124
if (err) {
109-
console.log("package.json error:", err.message);
125+
console.log('package.json error:', err.message);
110126
} else {
111-
console.log("package.json written successfully");
127+
console.log('package.json written successfully');
112128
}
113129
});
114130
};
115131

116-
// async function createApplicationUtil({
117-
// path, appName, genOption
118-
// }) {
119-
// if (genOption === 1) {
120-
// return [
121-
// await execFile('npm', ['init', '-y'], { cwd: path }),
122-
// await execFile('touch', 'index.tsx', { cwd: path }),
123-
// await execFile('touch', 'index.html', { cwd: path }),
124-
// await execFile('touch', 'webpack.config.js', { cwd: path }),
125-
// await execFile('touch', '.babelrc', { cwd: path }),
126-
// ];
127-
// }
128-
// }
129-
130-
module.exports = {
131-
target: 'web',
132-
mode: 'development',
133-
entry: './index.tsx',
134-
output: {
135-
path: path.resolve(__dirname, 'build'),
136-
filename: 'bundle.js'
137-
},
138-
module: { rules },
139-
resolve: {extensions: ['.ts', '.tsx', '.js', '.jsx']},
140-
devServer: {
141-
contentBase: './',
142-
port: 5000
143-
}
144-
}
132+
export const createWebpack = (path, appName) => {
133+
const filePath = `${path}/${appName}/webpack.config.js`;
134+
const data = `
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+
};
145178
`;
146179
fs.writeFile(filePath, data, err => {
147180
if (err) {
148-
console.log("webpack error:", err.message);
181+
console.log('webpack error:', err.message);
149182
} else {
150-
console.log("webpack written successfully");
183+
console.log('webpack written successfully');
151184
}
152185
});
153186
};
@@ -161,42 +194,73 @@ export const createBabel = (path, appName) => {
161194
`;
162195
fs.writeFile(filePath, data, err => {
163196
if (err) {
164-
console.log("babelrc error:", err.message);
197+
console.log('babelrc error:', err.message);
165198
} else {
166-
console.log("babelrc written successfully");
199+
console.log('babelrc written successfully');
167200
}
168201
});
169202
};
170203

171204
export const createTsConfig = (path, appName) => {
172205
const filePath = `${path}/${appName}/tsconfig.json`;
173206
const data = `
174-
{
175-
"compilerOptions": {
176-
"outDir": "./build/",
177-
"sourceMap": true,
178-
"noImplicitAny": true,
179-
"module": "commonjs",
180-
"target": "es6",
181-
"jsx": "react"
182-
},
183-
"include": ["**/*.ts", "**/*.tsx"],
184-
"exclude": ["node_modules"]
185-
}
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/
186250
`;
187251
fs.writeFile(filePath, data, err => {
188252
if (err) {
189-
console.log("TSConfig error:", err.message);
253+
console.log('server file error:', err.message);
190254
} else {
191-
console.log("TSConfig written successfully");
255+
console.log('server file written successfully');
192256
}
193257
});
194258
};
195259

196260
async function createApplicationUtil({
197261
path,
198262
appName,
199-
genOption
263+
genOption,
200264
}: {
201265
path: string;
202266
appName: string;
@@ -209,6 +273,7 @@ async function createApplicationUtil({
209273
await createWebpack(path, appName);
210274
await createBabel(path, appName);
211275
await createTsConfig(path, appName);
276+
await createServer(path, appName);
212277
}
213278
}
214279
export default createApplicationUtil;

0 commit comments

Comments
 (0)