Skip to content

Commit b262a6b

Browse files
tolgamizrakciChristianEdwardPadilla
tolgamizrakci
authored and
ChristianEdwardPadilla
committed
minor styling changes
2 parents dd15f37 + dbf8bf8 commit b262a6b

File tree

1 file changed

+170
-121
lines changed

1 file changed

+170
-121
lines changed

‎src/utils/createApplication.util.ts

Lines changed: 170 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import fs from 'fs';
2-
import { format } from 'prettier';
3-
import componentRender from './componentRender.util.ts';
42

53
function createIndexHtml(path, appName) {
64
let dir = path;
@@ -22,19 +20,17 @@ function createIndexHtml(path, appName) {
2220

2321
const filePath: string = `${dir}/index.html`;
2422
const data: string = `
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>
23+
<!DOCTYPE html>
24+
<html>
25+
<head>
26+
<meta charset="UTF-8" />
27+
<title>ReacType App</title>
28+
</head>
29+
<body>
30+
<div id="root"></div>
31+
<script src="./build/bundle.js"></script>
32+
</body>
33+
</html>
3834
`;
3935
fs.writeFileSync(filePath, data, err => {
4036
if (err) {
@@ -48,12 +44,12 @@ function createIndexHtml(path, appName) {
4844
export const createIndexTsx = (path, appName) => {
4945
const filePath = `${path}/${appName}/src/index.tsx`;
5046
const data = `
51-
import * as React from 'react';
52-
import * as ReactDOM from 'react-dom';
53-
54-
import { App } from './components/App';
55-
56-
ReactDOM.render(<App />, document.getElementById('root'));
47+
import * as React from 'react';
48+
import * as ReactDOM from 'react-dom';
49+
50+
import App from './components/App.tsx';
51+
52+
ReactDOM.render(<App />, document.getElementById('root'));
5753
`;
5854
fs.writeFile(filePath, data, err => {
5955
if (err) {
@@ -68,36 +64,57 @@ export const createPackage = (path, appName) => {
6864
const filePath = `${path}/${appName}/package.json`;
6965
const data = `
7066
{
71-
"name": "reacType-boiler-plate",
67+
"name": "reactype",
7268
"version": "1.0.0",
7369
"description": "",
74-
"main": "index.tsx",
70+
"main": "index.js",
7571
"scripts": {
76-
"start": "webpack-dev-server --open",
77-
"build": "webpack"
78-
},
79-
"keywords": [],
80-
"author": "",
81-
"license": "ISC",
82-
"depenencies": {
83-
"react": "^16.4.1",
84-
"react-dom": "^16.4.1"
85-
},
86-
"devDependencies": {
87-
"@babel/preset-typescript": "^7.3.3",
88-
"@types/react": "^16.8.14",
89-
"@types/react-dom": "^16.8.4",
90-
"babel-core": "^6.26.3",
91-
"babel-eslint": "^8.2.6",
92-
"babel-loader": "^7.1.4",
93-
"babel-preset-env": "^1.6.1",
94-
"babel-preset-react": "^6.24.1",
95-
"typescript": "^3.4.4",
96-
"webpack": "^4.4.0",
97-
"webpack-cli": "^3.3.0",
98-
"webpack-dev-server": "^3.3.1"
99-
}
100-
}
72+
"start": "node server/server.js",
73+
"build": "cross-env NODE_ENV=production webpack",
74+
"dev": "nodemon server/server.js & cross-env NODE_ENV=development webpack-dev-server --open"
75+
},
76+
"nodemonConfig": {
77+
"ignore": [
78+
"build",
79+
"src"
80+
]
81+
},
82+
"keywords": [],
83+
"author": "",
84+
"license": "MIT",
85+
"dependencies": {
86+
"@types/react": "^16.8.13",
87+
"@types/react-dom": "^16.8.4",
88+
"express": "^4.16.4",
89+
"react": "^16.8.6",
90+
"react-dom": "^16.8.6",
91+
"webpack": "^4.29.6"
92+
},
93+
"devDependencies": {
94+
"@babel/core": "^7.4.3",
95+
"@babel/preset-env": "^7.4.3",
96+
"@babel/preset-react": "^7.0.0",
97+
"@babel/preset-typescript": "^7.3.3",
98+
"babel-loader": "^8.0.5",
99+
"cross-env": "^5.2.0",
100+
"css-loader": "^2.1.1",
101+
"file-loader": "^3.0.1",
102+
"isomorphic-fetch": "^2.2.1",
103+
"node-sass": "^4.11.0",
104+
"nodemon": "^1.18.9",
105+
"postcss-loader": "^3.0.0",
106+
"sass-loader": "^7.1.0",
107+
"source-map-loader": "^0.2.4",
108+
"style-loader": "^0.23.1",
109+
"tslint": "^5.15.0",
110+
"tslint-config-prettier": "^1.18.0",
111+
"tslint-react": "^4.0.0",
112+
"typescript": "^3.4.3",
113+
"webpack": "^4.29.6",
114+
"webpack-cli": "^3.3.0",
115+
"webpack-dev-server": "^3.2.1"
116+
}
117+
}
101118
`;
102119
fs.writeFile(filePath, data, err => {
103120
if (err) {
@@ -111,49 +128,49 @@ export const createPackage = (path, appName) => {
111128
export const createWebpack = (path, appName) => {
112129
const filePath = `${path}/${appName}/webpack.config.js`;
113130
const data = `
114-
var status = process.env.NODE_ENV; //taken from script so we don't have to flip mode when using development/production
115-
var path = require('path');
116-
117-
module.exports = {
118-
entry: './src/index.tsx',
119-
output: {
120-
path: path.resolve(__dirname, 'build'),
121-
filename: 'bundle.js',
122-
},
123-
124-
// Enable sourcemaps for debugging webpack's output.
125-
devtool: 'source-map',
126-
127-
resolve: {
128-
// Add '.ts' and '.tsx' as resolvable extensions.
129-
extensions: ['.ts', '.tsx', '.js', '.json'],
130-
},
131-
mode: status,
132-
devServer: {
133-
publicPath: '/build/',
134-
// proxy: {
135-
// '/testDev': 'http://localhost:3000',
136-
// },
137-
},
138-
139-
module: {
140-
rules: [
141-
// All files with a '.ts' or '.tsx' extension will be handled by babel-loader
142-
{ test: /.tsx?$/, exclude: /node-modules/, loader: 'babel-loader' },
143-
144-
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
145-
{ enforce: 'pre', test: /.js$/, exclude: /node-modules/, loader: 'source-map-loader' },
146-
{
147-
test: /.scss$/,
148-
use: [
149-
'style-loader', // creates style nodes from JS strings
150-
'css-loader', // translates CSS into CommonJS
151-
'sass-loader', // compiles Sass to CSS, using Node Sass by default
152-
],
153-
},
154-
],
155-
},
156-
};
131+
var status = process.env.NODE_ENV; //taken from script so we don't have to flip mode when using development/production
132+
var path = require('path');
133+
134+
module.exports = {
135+
entry: './src/index.tsx',
136+
output: {
137+
path: path.resolve(__dirname, 'build'),
138+
filename: 'bundle.js',
139+
},
140+
141+
// Enable sourcemaps for debugging webpack's output.
142+
devtool: 'source-map',
143+
144+
resolve: {
145+
// Add '.ts' and '.tsx' as resolvable extensions.
146+
extensions: ['.ts', '.tsx', '.js', '.json'],
147+
},
148+
mode: status,
149+
devServer: {
150+
publicPath: '/build/',
151+
// proxy: {
152+
// '/testDev': 'http://localhost:3000',
153+
// },
154+
},
155+
156+
module: {
157+
rules: [
158+
// All files with a '.ts' or '.tsx' extension will be handled by babel-loader
159+
{ test: /.tsx?$/, exclude: /node-modules/, loader: 'babel-loader' },
160+
161+
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
162+
{ enforce: 'pre', test: /.js$/, exclude: /node-modules/, loader: 'source-map-loader' },
163+
{
164+
test: /.scss$/,
165+
use: [
166+
'style-loader', // creates style nodes from JS strings
167+
'css-loader', // translates CSS into CommonJS
168+
'sass-loader', // compiles Sass to CSS, using Node Sass by default
169+
],
170+
},
171+
],
172+
},
173+
};
157174
`;
158175
fs.writeFile(filePath, data, err => {
159176
if (err) {
@@ -183,18 +200,17 @@ export const createBabel = (path, appName) => {
183200
export const createTsConfig = (path, appName) => {
184201
const filePath = `${path}/${appName}/tsconfig.json`;
185202
const data = `
186-
{
187-
"compilerOptions": {
188-
"outDir": "./build/",
189-
"sourceMap": true,
190-
"noImplicitAny": true,
191-
"module": "commonjs",
192-
"target": "es6",
193-
"jsx": "react"
194-
},
195-
"include": ["./src/**/*"],
196-
"exclude": ["node_modules"]
197-
}
203+
{
204+
"compilerOptions": {
205+
"outDir": "./dist/",
206+
"sourceMap": true,
207+
"noImplicitAny": true,
208+
"module": "commonjs",
209+
"target": "es6",
210+
"jsx": "react"
211+
},
212+
"include": ["./src/**/*"]
213+
}
198214
`;
199215
fs.writeFile(filePath, data, err => {
200216
if (err) {
@@ -205,27 +221,59 @@ export const createTsConfig = (path, appName) => {
205221
});
206222
};
207223

224+
export const createTsLint = (path, appName) => {
225+
const filePath = `${path}/${appName}/tslint.json`;
226+
const data = `
227+
{
228+
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
229+
"tslint.autoFixOnSave": true,
230+
"linterOptions": {
231+
"exclude": ["config/**/*.js", "node_modules/**/*.ts"]
232+
},
233+
"rules": {
234+
"quotemark": [true, "single", "avoid-escape", "avoid-template", "jsx-double"],
235+
"jsx-boolean-value": false,
236+
"jsx-no-lambda": false,
237+
"jsx-no-multiline-js": false,
238+
"object-literal-sort-keys": false,
239+
"member-ordering": false,
240+
"no-console": false,
241+
"ordered-imports": false,
242+
"comment-format": false
243+
// "jsx-key": false,
244+
}
245+
}
246+
`;
247+
fs.writeFile(filePath, data, err => {
248+
if (err) {
249+
console.log('TSLint error:', err.message);
250+
} else {
251+
console.log('TSLint written successfully');
252+
}
253+
});
254+
};
255+
208256
export const createServer = (path, appName) => {
209257
const filePath = `${path}/${appName}/server/server.js`;
210258
const data = `
211-
const express = require('express');
212-
const path = require('path');
213-
const app = express();
214-
215-
app.get('/testDev', (req, res) => {
216-
res.send({ dev: 'testDev endpoint hit' });
217-
});
218-
219-
// statically serve everything in the build folder on the route '/build'
220-
app.use('/build', express.static(path.join(__dirname, '../build')));
221-
// serve index.html on the route '/'
222-
app.get('/', (req, res) => {
223-
res.sendFile(path.join(__dirname, '../index.html'));
224-
});
225-
226-
app.listen(3000, () => {
227-
console.log('listening on port 3000');
228-
}); //listens on port 3000 -> http://localhost:3000/
259+
const express = require('express');
260+
const path = require('path');
261+
const app = express();
262+
263+
app.get('/testDev', (req, res) => {
264+
res.send({ dev: 'testDev endpoint hit' });
265+
});
266+
267+
// statically serve everything in the build folder on the route '/build'
268+
app.use('/build', express.static(path.join(__dirname, '../build')));
269+
// serve index.html on the route '/'
270+
app.get('/', (req, res) => {
271+
res.sendFile(path.join(__dirname, '../index.html'));
272+
});
273+
274+
app.listen(3000, () => {
275+
console.log('listening on port 3000');
276+
}); //listens on port 3000 -> http://localhost:3000/
229277
`;
230278
fs.writeFile(filePath, data, err => {
231279
if (err) {
@@ -252,6 +300,7 @@ async function createApplicationUtil({
252300
await createWebpack(path, appName);
253301
await createBabel(path, appName);
254302
await createTsConfig(path, appName);
303+
await createTsLint(path, appName);
255304
await createServer(path, appName);
256305
}
257306
}

0 commit comments

Comments
 (0)