Skip to content

Commit 320e651

Browse files
jackcookjackcook
committed
Restructured project
1 parent f28e646 commit 320e651

22 files changed

+8629
-5148
lines changed

‎.babelrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["@babel/preset-env"],
3+
"plugins": ["@babel/plugin-proposal-class-properties"]
4+
}

‎.eslintrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"parser": "babel-eslint",
3+
"rules": {}
4+
}

‎.gitignore

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
# macOS
2-
.DS_Store
3-
4-
# vim
5-
*.swp
6-
7-
# Node
8-
dist/
9-
node_modules/
10-
.yarn/
11-
.pnp.js
1+
**/.DS_Store
2+
/node_modules
3+
/dist

‎.yarnrc.yml

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2020 HackMIT
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ Make sure you have yarn installed. If you don't have yarn installed, [click here
99
### Installation
1010

1111
```
12-
yarn install
12+
yarn
1313
```
1414

1515
### Get Started
1616

1717
```
18-
yarn run dev
18+
yarn start
1919
```
2020

2121
If you need to test anything that involves communicating with [playground-backend](https://github.com/techx/playground), refer to the README in that repository to get that up and running.

‎config/paths.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const path = require('path')
2+
3+
module.exports = {
4+
src: path.resolve(__dirname, '../src'), // source files
5+
build: path.resolve(__dirname, '../dist'), // production build files
6+
static: path.resolve(__dirname, '../public'), // static files to copy to build folder
7+
}

‎config/webpack.common.js

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
const paths = require('./paths')
2+
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
3+
const CopyWebpackPlugin = require('copy-webpack-plugin')
4+
const HtmlWebpackPlugin = require('html-webpack-plugin')
5+
6+
module.exports = {
7+
/**
8+
* Entry
9+
*
10+
* The first place Webpack looks to start building the bundle.
11+
*/
12+
entry: [paths.src + '/index.js'],
13+
14+
/**
15+
* Output
16+
*
17+
* Where Webpack outputs the assets and bundles.
18+
*/
19+
output: {
20+
path: paths.build,
21+
filename: '[name].bundle.js',
22+
publicPath: '/',
23+
},
24+
25+
/**
26+
* Plugins
27+
*
28+
* Customize the Webpack build process.
29+
*/
30+
plugins: [
31+
/**
32+
* CleanWebpackPlugin
33+
*
34+
* Removes/cleans build folders and unused assets when rebuilding.
35+
*/
36+
new CleanWebpackPlugin(),
37+
38+
/**
39+
* CopyWebpackPlugin
40+
*
41+
* Copies files from target to destination folder.
42+
*/
43+
new CopyWebpackPlugin([
44+
{
45+
from: paths.static,
46+
to: 'assets',
47+
ignore: ['*.DS_Store'],
48+
},
49+
]),
50+
51+
/**
52+
* HtmlWebpackPlugin
53+
*
54+
* Generates an HTML file from a template.
55+
*/
56+
new HtmlWebpackPlugin({
57+
title: 'HackMIT Playground',
58+
// favicon: paths.static + '/favicon.png',
59+
template: paths.src + '/template.html', // template file
60+
filename: 'index.html', // output file
61+
}),
62+
],
63+
64+
/**
65+
* Module
66+
*
67+
* Determine how modules within the project are treated.
68+
*/
69+
module: {
70+
rules: [
71+
/**
72+
* JavaScript
73+
*
74+
* Use Babel to transpile JavaScript files.
75+
*/
76+
{
77+
test: /\.js$/,
78+
exclude: /node_modules/,
79+
use: ['babel-loader', 'eslint-loader'],
80+
},
81+
82+
/**
83+
* Styles
84+
*
85+
* Inject CSS into the head with source maps.
86+
*/
87+
{
88+
test: /\.(scss|css)$/,
89+
use: [
90+
'style-loader',
91+
{ loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } },
92+
{ loader: 'postcss-loader', options: { sourceMap: true } },
93+
{ loader: 'sass-loader', options: { sourceMap: true } },
94+
],
95+
},
96+
97+
/**
98+
* Images
99+
*
100+
* Copy image files to build folder.
101+
*/
102+
{
103+
test: /\.(?:ico|gif|png|jpg|jpeg|webp|svg)$/i,
104+
loader: 'file-loader',
105+
options: {
106+
name: '[path][name].[ext]',
107+
context: 'src', // prevent display of src/ in filename
108+
},
109+
},
110+
111+
/**
112+
* Fonts
113+
*
114+
* Inline font files.
115+
*/
116+
{
117+
test: /\.(woff(2)?|eot|ttf|otf|)$/,
118+
loader: 'url-loader',
119+
options: {
120+
limit: 8192,
121+
name: '[path][name].[ext]',
122+
context: 'src', // prevent display of src/ in filename
123+
},
124+
},
125+
],
126+
},
127+
}

‎config/webpack.dev.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const paths = require('./paths')
2+
const webpack = require('webpack')
3+
const merge = require('webpack-merge')
4+
const common = require('./webpack.common.js')
5+
6+
module.exports = merge(common, {
7+
/**
8+
* Mode
9+
*
10+
* Set the mode to development or production.
11+
*/
12+
mode: 'development',
13+
14+
/**
15+
* Devtool
16+
*
17+
* Control how source maps are generated.
18+
*/
19+
devtool: 'inline-source-map',
20+
21+
/**
22+
* DevServer
23+
*
24+
* Spin up a server for quick development.
25+
*/
26+
devServer: {
27+
historyApiFallback: true,
28+
contentBase: paths.build,
29+
open: true,
30+
compress: true,
31+
hot: true,
32+
port: 3000,
33+
},
34+
35+
plugins: [
36+
/**
37+
* HotModuleReplacementPlugin
38+
*
39+
* Only update what has changed.
40+
*/
41+
new webpack.HotModuleReplacementPlugin(),
42+
],
43+
})

‎config/webpack.prod.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
const paths = require('./paths')
2+
const merge = require('webpack-merge')
3+
const common = require('./webpack.common.js')
4+
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
5+
const TerserJSPlugin = require('terser-webpack-plugin')
6+
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
7+
8+
module.exports = merge(common, {
9+
mode: 'production',
10+
devtool: false,
11+
output: {
12+
path: paths.build,
13+
publicPath: '/',
14+
filename: '[name].[contenthash].bundle.js',
15+
},
16+
plugins: [
17+
/**
18+
* MiniCssExtractPlugin
19+
*
20+
* Extracts CSS into separate files.
21+
*
22+
* Note: style-loader is for development, MiniCssExtractPlugin is for production.
23+
* They cannot be used together in the same config.
24+
*/
25+
new MiniCssExtractPlugin({
26+
filename: 'styles/[name].[contenthash].css',
27+
chunkFilename: '[id].css',
28+
}),
29+
],
30+
module: {
31+
rules: [
32+
{
33+
test: /\.(scss|css)$/,
34+
use: [
35+
MiniCssExtractPlugin.loader,
36+
{
37+
loader: 'css-loader',
38+
options: {
39+
importLoaders: 1,
40+
},
41+
},
42+
'postcss-loader',
43+
'sass-loader',
44+
],
45+
},
46+
],
47+
},
48+
49+
/**
50+
* Optimization
51+
*
52+
* Production minimizing of JavaSvript and CSS assets.
53+
*/
54+
optimization: {
55+
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
56+
// Once your build outputs multiple chunks, this option will ensure they share the webpack runtime
57+
// instead of having their own. This also helps with long-term caching, since the chunks will only
58+
// change when actual code changes, not the webpack runtime.
59+
runtimeChunk: 'single',
60+
// This breaks apart commonly shared deps (react, semantic ui, etc) into one shared bundle. React, etc
61+
// won't change as often as the app code, so this chunk can be cached separately from app code.
62+
splitChunks: {
63+
cacheGroups: {
64+
vendor: {
65+
test: /[\\/]node_modules[\\/](react|react-dom|lodash)[\\/]/,
66+
name: 'vendors',
67+
chunks: 'all',
68+
},
69+
},
70+
},
71+
},
72+
performance: {
73+
hints: false,
74+
maxEntrypointSize: 512000,
75+
maxAssetSize: 512000,
76+
},
77+
})

‎package.json

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,39 @@
11
{
2-
"name": "playground-frontend",
2+
"name": "playground",
3+
"version": "0.1",
4+
"main": "index.js",
5+
"license": "MIT",
36
"scripts": {
4-
"build": "webpack --config webpack.config.js --mode development",
5-
"dev": "yarn run build && serve dist"
7+
"start": "cross-env NODE_ENV=development webpack-dev-server --config config/webpack.dev.js",
8+
"build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js"
69
},
7-
"dependencies": {
8-
"copy-webpack-plugin": "^6.0.1",
9-
"serve": "^11.3.1",
10-
"webpack": "^4.43.0",
11-
"webpack-cli": "^3.3.11"
10+
"devDependencies": {
11+
"@babel/core": "^7.9.0",
12+
"@babel/plugin-proposal-class-properties": "^7.8.3",
13+
"@babel/preset-env": "^7.9.0",
14+
"babel-eslint": "^10.1.0",
15+
"babel-loader": "^8.1.0",
16+
"clean-webpack-plugin": "^3.0.0",
17+
"copy-webpack-plugin": "^5.1.1",
18+
"cross-env": "^7.0.2",
19+
"css-loader": "^3.5.0",
20+
"cssnano": "^4.1.10",
21+
"eslint": "^6.8.0",
22+
"eslint-loader": "^4.0.0",
23+
"file-loader": "^6.0.0",
24+
"html-webpack-plugin": "^4.0.4",
25+
"mini-css-extract-plugin": "^0.9.0",
26+
"node-sass": "^4.13.1",
27+
"optimize-css-assets-webpack-plugin": "^5.0.3",
28+
"postcss-loader": "^3.0.0",
29+
"postcss-preset-env": "^6.7.0",
30+
"sass-loader": "^8.0.2",
31+
"style-loader": "^1.1.3",
32+
"terser-webpack-plugin": "^2.3.5",
33+
"url-loader": "^4.0.0",
34+
"webpack": "^4.42.1",
35+
"webpack-cli": "^3.3.11",
36+
"webpack-dev-server": "^3.10.3",
37+
"webpack-merge": "^4.2.2"
1238
}
1339
}

‎postcss.config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
plugins: {
3+
'postcss-preset-env': {
4+
browsers: 'last 2 versions',
5+
},
6+
cssnano: {},
7+
},
8+
}

‎src/static/assets/background.png renamed to ‎src/images/background.png

File renamed without changes.

‎src/static/assets/penguin.jpg renamed to ‎src/images/penguin.jpg

File renamed without changes.

0 commit comments

Comments
 (0)