├── .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 |
--------------------------------------------------------------------------------