How can I combine express and react? – Twitter API

Here is an example set up that allows you to get to developing (npm package and webpack included )

1. package.json

   {
     "name": "mvp",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       "start": "nodemon server/server.js",
       "test": "echo "Error: no test specified" && exit 1",
       "webpack": "webpack --watch"
     },
   
     "author": "",
     "license": "ISC",
     "dependencies": {
       "angular": "^1.6.4",
       "axios": "^0.16.2",
       "babel-core": "^6.25.0",
       "babel-loader": "^7.0.0",
       "babel-preset-es2015": "^6.24.1",
       "babel-preset-react": "^6.24.1",
       "body-parser": "^1.17.2",
       "bootstrap": "^4.0.0-alpha.6",
       "cors": "^2.8.3",
       "dotenv": "^4.0.0",
       "express": "^4.15.3",
       "lodash": "^4.17.4",
       "morgan": "^1.8.2",
       "pg": "^6.2.4",
       "react": "^15.6.0",
       "react-bootstrap": "^0.31.0",
       "react-dom": "^15.6.0",
       "react-transition-group": "^1.2.0",
       "reactstrap": "^4.6.2",
       "sequelize": "^4.0.0",
       "webpack": "^2.6.1"
     },
     "devDependencies": {
       "nodemon": "^1.11.0"
     }
   }
   

2. webpack.config

   //this is a code 
   const path = require('path');
   
   const SRC_DIR = path.resolve(__dirname, 'react-client/src');
   const BUILD_DIR = path.resolve(__dirname, 'react-client');
   
   module.exports = {
     entry: path.resolve(SRC_DIR, 'index.js'),
     output: {
       filename: 'bundle.js',
       path: BUILD_DIR
     },
     module: {
       rules: [
         {
           test: /.(js|jsx)$/,
           exclude: [/node_modules/],
           use: [{
             loader: 'babel-loader',
             options: { presets: ['es2015', 'react'] }
           }],
         }
       ]
     }
   }
   

3. example server.js setup

   const express = require('express');
   const bodyParser = require('body-parser');
   const morgan = require('morgan')
   const port = 8000
   const db = require('../database/config.js')
   const todoListRouter = require('./router/todoList.router')
   const cors = require('cors')
   const app = express()
   
   app.use(express.static('react-client'))
      .use(bodyParser.json())
      .use(bodyParser.urlencoded({extended:true}))
      .use(morgan('dev'))
      .use('/api', todoListRouter)
   
   app.all('*', function(req, res, next){
       res.header("Access-Control-Allow-Origin", "x")
       res.header("Access-Control-Allow-Headers","X-Request-With");
       next();
   })
   
   app.listen(port, 'localhost', ()=>{
       console.log("server running on port :" + port);
   })
   

4. given your react index.js, this is an example of importing what you need

   import React, { Component } from 'react'
   import ReactDOM from 'react-dom'
   import axios from 'axios'
   import NavBar from '../src/components/navbar'
   import ToDo from '../src/components/todo'
   import ToDoBuilder from '../src/components/todobuilder'
   import ToDoList from '../src/components/todolist'
   import ToDosWithSameUser from '../src/components/todowithsameuser'
   ....//your component here
   ReactDOM.render(<App />, document.getElementById('app'));
   

in short, look at the entry point in webpack.config.js, you can see that it looks at ‘react-client/src’ and find index.js.

to run the script, simply do
npm start,
npm run webpack