react application not rendering react component in Express

Question

I'm building a MVC Express app using React and node.js . i have index.html in public folder , and index.jsx in the views folder

then, I start my server, go to localhost and I see a blank page, i tried many solutions and none of them solve the problem

this is file structure

   +-- app.js
   +-- public
   |   +-- index.html
   +-- routes
   |   +-- index.js
   +-- views
   |   +-- index.jsx

this is the app.js in the root

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');


var app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
//app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(__dirname + '/public'));
app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

and this is public/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js" type="text/javascript"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js" type="text/javascript"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" type="text/javascript"></script>

    <title>MERN</title>
    <meta name="viewport" content="width=device-width">

  </head>
  <body>


  <div id="root"></div>
<script type="text/javascript"  ></script>
  </body>
</html>

and views/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';



 ReactDOM.render(
  <h1>hello express</h1>,document.getElementById('root')
);

routers/index.js



var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
 // res.render('index', { title: 'Express'}); this is the old line
  res.render('index.html');
});

module.exports = router;

Is there any Log on the page when you open the developer console? — Italo Ayres
– Italo Ayres, Commented Dec 17, 2019 at 19:03
Can you share your indexRouter ? Also can you see something in the page html? — Italo Ayres
– Italo Ayres, Commented Dec 17, 2019 at 19:39

Michael Abeln · Accepted Answer · 2019-12-17 21:58:57Z

1

Try using sendFile instead of render in your routers/index.js file

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
 // res.render('index', { title: 'Express'}); this is the old line
  res.sendFile('index.html');
});

module.exports = router;

answered Dec 17, 2019 at 21:58

Michael Abeln

2,58713 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Abeln Over a year ago

@RaslanDyab hmm and youre sure you have no error logs in your console or terminal? You might be having a conflict between app.set('views', __dirname + '/views'); and app.use(express.static(__dirname + '/public'));

Collectives™ on Stack Overflow

react application not rendering react component in Express

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related