3

I have a use case that I dont think is too unique but I am running into challenges. The application I have is written in express/EJS and is running on port 35, I want to include react so I am following a tutorial and am writing this app within my existing app and its running on another port. I can see both applications when they are on different ports, if I try to put them on the same port they conflict. duh. however I would like to run React within my app for certain features, how do I accomplish this? How can I run my node app and react at the same time?

My dependencies for my react app are: 

"babel": "^6.5.2",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"

My entire dependency tree is 

 "dependencies": {
    "async": "^2.1.4",
    "babel": "^6.5.2",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "bcrypt-nodejs": "0.0.3",
    "bluebird": "^3.4.6",
    "body-parser": "^1.15.2",
    "cloudinary": "^1.4.6",
    "cookie-parser": "^1.4.3",
    "ejs": "^2.5.2",
    "express": "^4.14.0",
    "express-flash": "0.0.2",
    "express-session": "^1.14.2",
    "method-override": "^2.3.7",
    "moment": "^2.17.0",
    "mongoose": "^4.6.8",
    "morgan": "^1.7.0",
    "multer": "^1.2.0",
    "nodemailer": "^2.7.0",
    "passport-local-mongoose": "^4.0.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "serve-favicon": "^2.3.2",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "xoauth2": "^1.2.0"
  },

the top list is just the ones I loaded for the tutorial. So maybe to run React in Node I dont need the webserver aspect of react, if there is one? Or is that just using node?

Here is the webpack.config.js file. 

const webpack =require('webpack'),
path    =require('path');

const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");

const config =  {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            }
        ]
    }
};

module.exports = config;

Here is the scripts in the pacakge.json file. This has the code with the port and such: 

  "scripts": {
    "start":"npm run build",
    "build":"webpack -d && sudo cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --host 0.0.0.0 --port 35",
    "build:prod": "webpack -p && cp src/index.html dist/index.html"
  },
illcrx
  • 774
  • 1
  • 12
  • 32

1 Answers1

5

To run the nodejs and reactjs app simply follow these steps:

  1. npm i concurrently --save

  2. Then add these scripts in composer.json of your nodejs app,

    "scripts": { "start": "node server.js", //For starting node server with **npm run start** "react": "npm start --prefix react", // --prefix react indicates the folder of your react app "dev": "concurrently \"npm run start\" \"npm run react\"" },

  3. Then add,

    "proxy": "http://localhost:5000" //Add your own port where nodejs app is running

    to your react composer.json file.

  4. Then finally run npm run dev to start the react and node app concurrently.

For more information visit https://www.npmjs.com/package/concurrently .

Anand Mainali
  • 993
  • 1
  • 14
  • 23