Chcę stworzyć prostą aplikację React z serwerem ekspresowym.

Mam skonfigurowany prosty serwer ekspresowy, taki jak poniżej.

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' });
  });

Mam strukturę folderów jak:

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

Teraz chcę połączyć ten express.js z moją aplikacją React. Poniżej znajduje się moja aplikacja Reaguj. (nie chcę używać aplikacji create-react)

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/babel-standalone@6.15.0/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>

Każda pomoc byłaby bardzo mile widziana.

2
ketan 25 listopad 2018, 14:31

1 odpowiedź

Najlepsza odpowiedź

Musisz udostępniać swoje pliki z katalogu publicznego na żądanie podstawowego adresu URL (http://domain/)

1. Udostępnij publicznie pliki css, jss

Dodaj tę linię do pliku serwera ekspresowego

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

2. Przenieś index.html i index.js do public dir

Twoja struktura będzie wyglądać

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

3. Dodaj trasę do obsługi pliku indeksu

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/public/index.html'));
});
3
Dinesh Pandiyan 25 listopad 2018, 15:04