Menu
Hello I am learning MERN stack and I have problem with serving my react component this is server.js code
const path = require('path')
const fs = require('fs')
const express = require('express')
const app = express()
app.set('view engine', 'html')
app.engine('html', function (path, options, callback) {
fs.readFile(path, 'utf-B', callback)
})
const cors = require('cors')
app.use(cors({
'origin': '*',
'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
'preflightContinue': false,
'optionsSuccessStatus': 204
}))
const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}))
app.use(express.static(path.join(__dirname, '/build')))
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '/build'), 'index.html')
res.end()
})
app.use('/*', (req, res) => res.status(404).send())
const isDev = true
app.use((err, req, res, next) => {
res.status(500).json({
error: 500,
message: 'Internal Server Error!',
stack: isDev
? err.stack
: null
})
})
const port = 8080
app.listen(port, () => {
console.log('app running at localhost:' + port)
})
Folder structure
build
bundle.js
index.html
client
App.js
index.html
index.js
server
server.js
webpack.config.js
package.json
There is no issues viisble in console - HTML is rendering properly however React component is not visible.
this is my index.html file:
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='x-ua-compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<meta name='author' content='Bartosz Ciach'>
<meta name='description'
content='Check how your habits, weather conditions and daily activities affect your life & health.'>
<meta name='keywords' content=''>
<link rel='icon' type='image/svg+xml' href='assets/icons/favicon.ico'>
<title>Doctor Crohn</title>
</head>
<body>
<div id='app'></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
and my webpack.config.js file code below
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './client/index.html',
filename: 'index.html',
inject: 'body'
})
module.exports = {
entry: './client/index.js',
output: {
path: path.join(__dirname, '/build'),
filename: 'bundle.js'
},
devServer: {
contentBase: './client',
hot: true,
port: 3000
},
module: {
loaders: [
{
enforce: 'pre',
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'standard-loader',
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loaders: ['react-hot-loader/webpack', 'babel-loader']
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpg)$/,
loaders: ['url-loader', 'img-loader']
},
{
test: /\.svg$/,
loader: 'svg-url-loader'
}
]
},
plugins: [HtmlWebpackPluginConfig]
}
I tried various things and unfortunately its still doesnt work as it should
928
Just to bring closure to this question.
The last hurdle to get the app to render properly was to modify a couple of lines in the server.js file to point correctly to the /build directory. Considering the folder structure, and the location of the /build directory relative to the server.js file location, the following lines were updated:
app.use(express.static(path.join(__dirname, '../build')))
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../build'), 'index.html')
res.end()
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
