Run backend and frontend

Author: imranhsayed

Diff for: config.js

@@ -1,5 +1,5 @@
 module.exports = {
 	tokenSecret: 'SECRET',
-	wordPressUrl: 'http://localhost:8888/wordpress',
+	wordPressUrl: 'https://orionhive.com',
 	wordPressRestNameSpace: '/wp-json/wp/v2/rae'
 };

Diff for: index.pug

@@ -0,0 +1,11 @@
+html
+  head
+    meta(charset="UTF-8")
+    meta(name="viewport", content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0")
+    link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css")
+    link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")
+    link(rel="stylesheet", href="static/bundle.css")
+  |
+  body
+    div(id="root")
+    script(src="static/bundle.js")

Diff for: package-lock.json

@@ -4,10 +4,11 @@
   "description": ":fire: This is a workshop for learning how to build React Applications.",
   "main": "index.js",
   "scripts": {
+    "start": "NODE_ENV=development nodemon server.js",
     "webpack-dev-server": "webpack-dev-server",
     "dev:client": "webpack-dev-server --mode=development",
     "dev:server": "nodemon server.js",
-    "start": "concurrently \"npm run dev:client\" \"npm run dev:server\"",
+    "dev": "concurrently \"npm run dev:client\" \"npm run dev:server\"",
     "prod": "webpack --mode=production"
   },
   "repository": {
@@ -22,18 +23,27 @@
   },
   "homepage": "https://github.com/imranhsayed/react-workshop#readme",
   "dependencies": {
+    "@babel/core": "^7.4.3",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
     "@reach/router": "^1.2.1",
     "axios": "^0.18.0",
+    "babel-loader": "^8.0.5",
     "body-parser": "^1.19.0",
     "concurrently": "^4.1.0",
     "cors": "^2.8.5",
     "css-loader": "^2.1.1",
     "express": "^4.17.0",
     "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
     "image-webpack-loader": "^4.6.0",
     "jsonwebtoken": "^8.5.1",
+    "mini-css-extract-plugin": "^0.6.0",
     "moment": "^2.24.0",
     "nodemon": "^1.19.0",
+    "path": "^0.12.7",
+    "pug": "^2.0.3",
     "qs": "^6.7.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
@@ -42,16 +52,9 @@
     "react-render-html": "^0.6.0",
     "style-loader": "^0.23.1",
     "url-loader": "^1.1.2",
-	"webpack-dev-server": "^3.4.1",
-	"@babel/core": "^7.4.3",
-	"@babel/plugin-proposal-class-properties": "^7.4.0",
-	"@babel/preset-env": "^7.4.3",
-	"@babel/preset-react": "^7.0.0",
-	"babel-loader": "^8.0.5",
-	"html-webpack-plugin": "^3.2.0",
-	"path": "^0.12.7",
-	"webpack": "^4.29.6",
-	"webpack-cli": "^3.3.0"
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.4.1"
   },
   "engines": {
     "node": "8.12.0"

Diff for: package.json

@@ -4,18 +4,44 @@ const jwt = require('jsonwebtoken');
 const bodyParser = require('body-parser');
 const config = require( './config' );
 const axios = require( 'axios' );
+const webpack = require('webpack');
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackConfig = require('./webpack.config');
+const path = require('path')
 
-const wordPressRestUrl = `${config.wordPressUrl}${config.wordPressRestNameSpace}`;
+const wordPressRestUrl = `${config.wordPressUrl}/${config.wordPressRestNameSpace}`;
+
+console.log(wordPressRestUrl, 'wordpressurl')
 
 const app = express();
 app.use( cors() );
 
+// Setting Paths
+app.use('/static', express.static(path.join(__dirname, '/')));
+
+// Setting views of the app
+app.set('views', path.join(__dirname, './'));
+app.set('view engine', 'pug');
+
 // Parse application/x-www-form-urlencoded
 app.use( bodyParser.urlencoded( { extended: false } ) );
 
 // Parse application/json
 app.use(bodyParser.json());
 
+// Adding webpack build
+// Middleware of webpack
+if (process.env.NODE_ENV === 'development') {
+	console.log('in webpack hot middleware');
+	const compiler = webpack(webpackConfig);
+
+	app.use(webpackDevMiddleware(compiler, {
+		noInfo: true,
+		publicPath: webpackConfig.output.publicPath,
+	}));
+}
+
+
 /**
  * Sign in user
  *
@@ -31,7 +57,6 @@ app.post( '/sign-in', ( req, res ) => {
 			// Make a login request.
 			axios.post( `${wordPressRestUrl}/user/login`, req.body )
 				.then( response => {
-
 					res.json( {
 						success: true,
 						status: 200,
@@ -84,4 +109,23 @@ app.post( '/create-post', ( req, res ) => {
 });
 } );
 
+app.get('/', (req, res) => {
+	res.render('index')
+})
+
+app.get('/login', (req, res) => {
+	res.render('index')
+})
+
+app.get('/dashboard/:userName', (req, res) => {
+	res.render('index')
+})
+
+app.get('/post/:id', (req, res) => {
+	res.render('index')
+})
+
+
+
+
 app.listen( 5000, () => console.log( 'Listening on port 5000' ) );

Diff for: server.js

@@ -23,7 +23,7 @@ class Home extends React.Component {
 	});
 
 	componentDidMount() {
-		const wordPressSiteURL = 'http://localhost:8888/wordpress';
+		const wordPressSiteURL = 'https://orionhive.com';
 		this.setState( { loading: true }, () => {
 			axios.get( `${wordPressSiteURL}/wp-json/wp/v2/posts/` )
 				.then( res => {

Diff for: src/components/Home.js

@@ -1,38 +1,59 @@
 const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
 const path = require( 'path' );
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require('webpack')
+
 module.exports = {
 	context: __dirname,
 	entry: './src/index.js',
 	output: {
-		path: path.resolve( __dirname, 'dist' ),
-		filename: 'main.js',
-		publicPath: "/"
+		filename: 'bundle.js',
+		path: __dirname + '/dist/bundle/',
+		publicPath: '/static/'
 	},
 	devServer: {
 		historyApiFallback: true
 	},
 	module: {
 		rules: [
 			{
-				test: /\.js$/,
-				use: 'babel-loader',
+				test: /\.js?$/,
+				exclude: /node_modules/,
+				use: { loader: 'babel-loader' },
 			},
 			{
 				test: /\.css$/,
-				use: ['style-loader', 'css-loader'],
+				use: [
+					{ loader: MiniCssExtractPlugin.loader },
+					{
+						loader: 'css-loader',
+					},
+				]
 			},
 			{
-				test: /\.(png|jp?g|svg|gif)$/,
-				use: [{
-					loader: "file-loader",
-				}]
+				test: /\.(png|jpg|gif)$/,
+				use: [
+					{
+						loader: 'file-loader',
+						options: {}
+					}
+				]
 			}
 		]
 	},
 	plugins: [
 		new HtmlWebPackPlugin({
 			template: path.resolve( __dirname, 'public/index.html' ),
 			filename: 'index.html'
+		}),
+		new webpack.HotModuleReplacementPlugin(),
+		new webpack.DefinePlugin({
+			'process.env': {
+				'NODE_ENV': JSON.stringify('development')
+			}
+		}),
+		new MiniCssExtractPlugin({
+			filename: "bundle.css",
 		})
 	]
 };