Connect express with react application

2
votes

I want to create simple react app with express server.

I have setup simple express server like following.

package.json

{
  "name": "hometask1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "eslint": "^5.9.0",
    "eslint-loader": "^2.1.1",
    "express": "^4.16.4",
    "jest": "^23.6.0",
    "npm-run-all": "^4.1.3",
    "open": "0.0.5",
    "webpack": "^4.26.0",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-hot-middleware": "^2.24.3"
  },
  "proxy": "http://localhost:3000/"
}

index.js

const express = require('express')
const app = express()
const port = 3000

//app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Listening on port ${port}!`))

app.get('/express_backend', (req, res) => {
    res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
  });

I have folder structure like: 

projectfolder    
    node_modules
    index.html
    index.js
    package.json
    package-lock.json

Now, i want to connect this express.js with my react app. Following is my react app. (I don't want to use create-react-app)

index.html 

<!DOCTYPE html>
<html>
<head>
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">

    var helloWorld = React.createElement("h1", {}, 'Hello World!');

    class HelloWorld extends React.Component {
        render () {
            return (
                    <h1>Hello World!</h1>
                )
        }
    }

    const container = React.createElement("div", {}, helloWorld, <HelloWorld /> );  

    ReactDOM.render(container, document.getElementById('root'))
</script>

</html>

Any help would be greatly appreciated.

1
javascriptreactjsexpress
What do you mean exactly with connect your express server with your react app? Do you want express to serve your html files, or do you want your frontend app to call the backend endpoints? - Kevin Amiranoff
I want to express to serve html file. when i run localhost it should run index.html react app. - ketan
ok. I think connect is not really a good term. it could mean several things. But in that case, the first answer is correct then. - Kevin Amiranoff
Ok thanks let me try then - ketan

1 Answers

3
votes

You need to serve your files from a public dir on base URL request (http://domain/)

1. Make css, jss files publicly accessible

Add this line to your express server file

const app = express()
const port = 3000
app.use(express.static('public')) // this line

2. Move index.html and index.js to public dir

You dir structure will look like

projectfolder    
    node_modules
    public
        index.html
        index.js
    package.json
    package-lock.json

3. Add a route to serve the index file

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/public/index.html'));
});