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 + }, +};