From 888eff91d8f7cc1eb61da96374f213f0920bc9f3 Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Mon, 19 Jun 2017 19:20:38 +0000 Subject: [PATCH] Create hello world React app with hot module replacement --- .babelrc | 4 ++++ .gitignore | 3 ++- dist/index.html | 9 +++++++++ package.json | 19 +++++++++++++++++-- server.js | 12 ++++++++++++ src/app.js | 11 +++++++++++ src/index.js | 22 ++++++++++++++++++++++ webpack.config.js | 28 ++++++++++++++++++++++++++++ 8 files changed, 105 insertions(+), 3 deletions(-) create mode 100644 .babelrc create mode 100644 dist/index.html create mode 100644 server.js create mode 100644 src/app.js create mode 100644 src/index.js create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..e557992 --- /dev/null +++ b/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["react"], + "plugins": ["react-hot-loader/babel"] +} diff --git a/.gitignore b/.gitignore index 707d627..c31fe56 100644 --- a/.gitignore +++ b/.gitignore @@ -4,7 +4,7 @@ node_modules/ # Compiled output -build +bundle.js # Runtime data database.sqlite @@ -25,6 +25,7 @@ yarn-error.log* !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +*.swp # Misc .DS_Store diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..07dd672 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,9 @@ + + + LED Toggle Demo + + +
+ + + diff --git a/package.json b/package.json index 1c0f8b6..6d7f5db 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,22 @@ "description": "", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "start": "node server.js", + "build": "webpack", + "dev": "webpack-dev-server" }, - "author": "" + "author": "", + "devDependencies": { + "babel-core": "^6.25.0", + "babel-loader": "^7.0.0", + "babel-preset-react": "^6.24.1", + "react-hot-loader": "^3.0.0-beta.6", + "webpack": "^3.0.0", + "webpack-dev-server": "^2.4.5" + }, + "dependencies": { + "express": "^4.15.3", + "react": "^15.6.1", + "react-dom": "^15.6.1" + } } diff --git a/server.js b/server.js new file mode 100644 index 0000000..3db2e93 --- /dev/null +++ b/server.js @@ -0,0 +1,12 @@ +const express = require('express') +const app = express() + +app.use('/', express.static('dist')) + +app.get('/hello', function (req, res) { + res.send('Hello World!') +}) + +app.listen(3000, function () { + console.log('Example app listening on port 3000!') +}) diff --git a/src/app.js b/src/app.js new file mode 100644 index 0000000..4a09d7f --- /dev/null +++ b/src/app.js @@ -0,0 +1,11 @@ +import React from 'react'; + +export default class Site extends React.Component { + render() { + return ( +
+ Hello React! +
+ ); + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..f75c3b1 --- /dev/null +++ b/src/index.js @@ -0,0 +1,22 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import 'react-hot-loader/patch'; +import { AppContainer } from 'react-hot-loader'; + +import App from './app'; + + +const render = Component => { + ReactDOM.render( + + + , + document.getElementById('root') + ) +} + +render(App) + +if (module.hot) { + module.hot.accept('./app', () => { render(App) }) +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..7ded9a3 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,28 @@ +const path = require('path'); +const webpack = require('webpack'); + +module.exports = { + entry: './src/index.js', + plugins: [ + new webpack.HotModuleReplacementPlugin(), + ], + output: { + filename: 'bundle.js', + path: path.resolve(__dirname, 'dist'), + publicPath: '/' + }, + module: { + rules: [ + { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } + ] + }, + stats: "normal", + devServer: { + contentBase: path.join(__dirname, "dist"), + publicPath: '/', + //inline: true, + hot: true, + host: '0.0.0.0', + disableHostCheck: true + }, +};