Skip to content

Commit 4f27124

Browse files
author
Eric Ren
committed
Init commit
0 parents  commit 4f27124

13 files changed

+5557
-0
lines changed

‎.babelrc

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"presets": [
3+
"react",
4+
["env", {
5+
"targets": {
6+
"browsers": ["last 2 versions"]
7+
},
8+
"modules": false,
9+
"useBuiltIns": true
10+
}]
11+
],
12+
"plugins": [
13+
"react-hot-loader/babel",
14+
"react-css-modules"
15+
]
16+
}

‎.gitignore

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
8+
# Runtime data
9+
pids
10+
*.pid
11+
*.seed
12+
*.pid.lock
13+
14+
# Directory for instrumented libs generated by jscoverage/JSCover
15+
lib-cov
16+
17+
# Coverage directory used by tools like istanbul
18+
coverage
19+
20+
# nyc test coverage
21+
.nyc_output
22+
23+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24+
.grunt
25+
26+
# Bower dependency directory (https://bower.io/)
27+
bower_components
28+
29+
# node-waf configuration
30+
.lock-wscript
31+
32+
# Compiled binary addons (http://nodejs.org/api/addons.html)
33+
build/Release
34+
35+
# Dependency directories
36+
node_modules/
37+
jspm_packages/
38+
39+
# Typescript v1 declaration files
40+
typings/
41+
42+
# Optional npm cache directory
43+
.npm
44+
45+
# Optional eslint cache
46+
.eslintcache
47+
48+
# Optional REPL history
49+
.node_repl_history
50+
51+
# Output of 'npm pack'
52+
*.tgz
53+
54+
# Yarn Integrity file
55+
.yarn-integrity
56+
57+
# dotenv environment variables file
58+
.env
59+
60+
61+
.idea/
62+
dist/

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017 HotSchedules
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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# React CSS Module Starter project
2+
3+
Purpose of this project is to learn how to setup a modern React web project with:
4+
5+
- babel
6+
- webpack
7+
- HMR
8+
- react-hot-reload
9+
- postcss
10+
- CSS Modules
11+
12+
13+
Sure we can eject a `create-react-app` project, but the configuration might be too daunting.
14+

‎index.template.ejs

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>React CSS Module Starter</title>
6+
</head>
7+
<body>
8+
<div id="root"></div>
9+
</body>
10+
</html>

‎package.json

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "react-css-module-starter",
3+
"version": "1.0.0",
4+
"description": "Demo app showcasing how to use nextgen components",
5+
"main": "index.js",
6+
"repository": "[email protected]:rencire/react-css-module-starter",
7+
"author": "Eric Ren <[email protected]>",
8+
"license": "MIT",
9+
"scripts": {
10+
"test": "echo \"Error: no test specified\" && exit 1",
11+
"watch": "webpack --progress --watch",
12+
"start": "webpack-dev-server",
13+
"build": "NODE_ENV=production webpack --config webpack.config.prod.js --progress"
14+
},
15+
"dependencies": {
16+
"babel-plugin-react-css-modules": "^3.2.1",
17+
"babel-polyfill": "^6.26.0",
18+
"normalize.css": "^7.0.0",
19+
"react": "^15.6.1",
20+
"react-dom": "^15.6.1"
21+
},
22+
"devDependencies": {
23+
"babel-cli": "^6.26.0",
24+
"babel-loader": "^7.1.2",
25+
"babel-preset-env": "^1.6.0",
26+
"babel-preset-react": "^6.24.1",
27+
"clean-webpack-plugin": "^0.1.16",
28+
"css-loader": "^0.28.7",
29+
"html-webpack-plugin": "^2.30.1",
30+
"postcss-cssnext": "^3.0.2",
31+
"postcss-import": "^10.0.0",
32+
"postcss-loader": "^2.0.6",
33+
"react-hot-loader": "next",
34+
"style-loader": "^0.18.2",
35+
"webpack": "^3.5.5",
36+
"webpack-dev-server": "^2.7.1",
37+
"yargs": "^8.0.2"
38+
}
39+
}

‎postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
'postcss-import': {},
4+
'postcss-cssnext': {}
5+
}
6+
}

‎src/App.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
import './app.css'
3+
4+
const App = () => (
5+
<div styleName='main-style'>
6+
Content here
7+
</div>
8+
)
9+
10+
11+
export default App;
12+
13+

‎src/app.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "normalize.css";
2+
3+
.main-style {
4+
color: red;
5+
}

‎src/index.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import "babel-polyfill"
2+
import React from 'react'
3+
import ReactDOM from 'react-dom'
4+
import { AppContainer } from 'react-hot-loader'
5+
import App from './App'
6+
7+
8+
9+
const render = Component => {
10+
ReactDOM.render(
11+
<AppContainer>
12+
<Component />
13+
</AppContainer>,
14+
document.getElementById('root')
15+
)
16+
}
17+
18+
render(App)
19+
20+
if (module.hot) {
21+
module.hot.accept('./App', () => { render(App) })
22+
}

‎webpack.config.js

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const path = require('path')
2+
const webpack = require('webpack')
3+
const HtmlWebpackPlugin = require('html-webpack-plugin')
4+
const argv = require('yargs').argv
5+
6+
const port = argv.port || 3000
7+
8+
module.exports = {
9+
entry: [
10+
'react-hot-loader/patch',
11+
`webpack-dev-server/client?http://localhost:${port}`,
12+
'webpack/hot/only-dev-server',
13+
'./src/index'
14+
],
15+
output: {
16+
filename: 'bundle.js',
17+
path: path.resolve(__dirname, 'dist'),
18+
publicPath: '/'
19+
// necessary for HMR to know where to load the hot update chunks
20+
},
21+
devtool: 'inline-source-map',
22+
plugins: [
23+
new HtmlWebpackPlugin({
24+
template: 'index.template.ejs',
25+
inject: 'body'
26+
}),
27+
new webpack.HotModuleReplacementPlugin(),
28+
new webpack.NamedModulesPlugin(),
29+
new webpack.NoEmitOnErrorsPlugin()
30+
],
31+
module: {
32+
rules: [
33+
{
34+
test: /\.jsx?$/,
35+
include: path.resolve(__dirname, './src'),
36+
use: {
37+
loader: 'babel-loader'
38+
},
39+
},
40+
{
41+
test: /\.css$/,
42+
include: path.resolve(__dirname, './src'),
43+
use: [
44+
{
45+
loader: 'style-loader',
46+
},
47+
{
48+
loader: 'css-loader',
49+
options: {
50+
importLoader: 1,
51+
modules: true,
52+
localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
53+
}
54+
},
55+
{
56+
loader: 'postcss-loader'
57+
}
58+
]
59+
}
60+
]
61+
},
62+
devServer: {
63+
host: 'localhost',
64+
port: port,
65+
66+
historyApiFallback: true,
67+
// respond to 404s with index.html
68+
69+
hot: true,
70+
// enable HMR on the server
71+
}
72+
73+
}

‎webpack.config.prod.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
const path = require('path')
2+
const webpack = require('webpack')
3+
const HtmlWebpackPlugin = require('html-webpack-plugin')
4+
const CleanWebpackPlugin = require('clean-webpack-plugin')
5+
6+
module.exports = {
7+
entry: './src/Landing.js',
8+
9+
output: {
10+
filename: 'static/bundle.js',
11+
path: path.resolve(__dirname, 'dist'),
12+
publicPath: "/"
13+
},
14+
15+
devtool: 'cheap-module-source-map',
16+
17+
module: {
18+
rules: [
19+
{
20+
test: /\.jsx?$/,
21+
use: [
22+
'babel-loader'
23+
],
24+
exclude: /node_modules/
25+
},
26+
{
27+
test: /\.css$/,
28+
include: path.resolve(__dirname, './src'),
29+
use: [
30+
{
31+
loader: 'style-loader',
32+
},
33+
{
34+
loader: 'css-loader',
35+
options: {
36+
importLoader: 1,
37+
modules: true,
38+
localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
39+
}
40+
},
41+
{
42+
loader: 'postcss-loader'
43+
}
44+
]
45+
}
46+
]
47+
},
48+
49+
plugins: [
50+
new CleanWebpackPlugin(['dist']),
51+
new HtmlWebpackPlugin({
52+
template: 'index.template.ejs',
53+
inject: 'body'
54+
}),
55+
new webpack.optimize.UglifyJsPlugin({
56+
sourceMap: true,
57+
comments: false
58+
})
59+
]
60+
}

0 commit comments

Comments
 (0)