├── .babelrc ├── .gitignore ├── package-lock.json ├── package.json ├── src ├── client │ ├── index.html │ ├── index.js │ └── style │ │ └── style.css └── server.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env", "react" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-node-enviroment", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "nodemon --exec babel-node ./src/server.js" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-cli": "^6.26.0", 14 | "babel-core": "^6.26.0", 15 | "babel-loader": "^7.1.2", 16 | "babel-preset-env": "^1.6.1", 17 | "babel-preset-react": "^6.24.1", 18 | "css-loader": "^0.28.9", 19 | "html-webpack-plugin": "^2.30.1", 20 | "node-sass": "^4.7.2", 21 | "nodemon": "^1.15.1", 22 | "sass-loader": "^6.0.6", 23 | "style-loader": "^0.20.2", 24 | "webpack": "^3.11.0", 25 | "webpack-dev-middleware": "^2.0.5", 26 | "webpack-livereload-plugin": "^1.0.0" 27 | }, 28 | "dependencies": { 29 | "express": "^4.16.2", 30 | "react": "^16.2.0", 31 | "react-dom": "^16.2.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React App 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /src/client/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | 4 | import './style/style.css'; 5 | 6 | const App = () => { 7 | return

8 | Hello World React and Node 9 |

10 | }; 11 | 12 | render( 13 | , 14 | document.getElementById('app') 15 | ); 16 | -------------------------------------------------------------------------------- /src/client/style/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FaztWeb/react-node-enviroment-to-start/30875d110b75e6b978fea0585c41a2a6da7bef92/src/client/style/style.css -------------------------------------------------------------------------------- /src/server.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import webpack from 'webpack'; 3 | import webpackDevMiddleware from 'webpack-dev-middleware'; 4 | import webpackConfig from '../webpack.config'; 5 | 6 | // initializing packages 7 | const app = express(); 8 | 9 | // settings 10 | app.set('port', process.env.PORT || 3000); 11 | 12 | // middlwares 13 | app.use(webpackDevMiddleware(webpack(webpackConfig))); 14 | 15 | // routes 16 | app.get('/', (req, res) => { 17 | res.send('Hello World'); 18 | }); 19 | 20 | app.get('/api', (req, res) => { 21 | res.json({api: 'works!'}); 22 | }); 23 | 24 | // starting the server 25 | app.listen(app.get('port'), () => { 26 | console.log(`Server on port ${app.get('port')}`); 27 | }); 28 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | import webpack from 'webpack'; 2 | import htmlWebpackPlugin from 'html-webpack-plugin'; 3 | import LiveReloadPlugin from 'webpack-livereload-plugin'; 4 | 5 | export default { 6 | entry: './src/client/index.js', 7 | output: { 8 | path: '/', 9 | filename: 'bundle.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | use: 'babel-loader', 15 | test: /\.js$/, 16 | exclude: /node_modules/ 17 | }, 18 | { 19 | use: ['style-loader', 'css-loader'], 20 | test: /\.css$/ 21 | }, 22 | { 23 | test: /\.scss$/, 24 | use: [ 25 | { 26 | loader: 'style-loader' 27 | }, 28 | { 29 | loader: 'css-loader', options: { 30 | sourceMap: true 31 | } 32 | }, 33 | { 34 | loader: 'sass-loader', options: { 35 | sourceMap: true 36 | } 37 | } 38 | ] 39 | } 40 | ] 41 | }, 42 | plugins: [ 43 | new htmlWebpackPlugin({ 44 | template: 'src/client/index.html' 45 | }), 46 | new LiveReloadPlugin() 47 | ] 48 | } 49 | --------------------------------------------------------------------------------