CODEWITHSUNDEEP
node.jsreactjsexpressstatic
Brooke Clonts
Brooke Clonts

Reputation: 465

Express not serving static files correctly for react build

I'm new to react. I've been trying to convert my MEAN stack app to an express and reactjs app but I'm having problems getting my build files to come in correctly. It looks like my server is loading my index.html file in place of my js files. Can anyone help me figure out why?

I've got the following error in my main.js in the browser: Uncaught SyntaxError: Unexpected token <

My files are built into a build folder which is a sibling to my server.js file. mywebsite (root) -src (f) -build (f) -server.js -public (f)

Here's my server.js

require('./server/config/config');

// Get dependencies
const express = require('express');
const morgan = require('morgan');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');

const api = require('./server/routes/api');

const compression = require('compression')
const app = express();

app.use(compression());

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method :url 
HTTP/:http-version" :status :res[content-length] :response-time ms'));

// Serve static assets
app.use(express.static(path.join(__dirname, 'build')));
app.use(express.static(path.join(__dirname, 'public')));

app.use('/api', api);

app.get('/robots.txt', function (req, res) {
    res.type('text/plain');
    res.send("User-agent: *\nDisallow: /");
});

// Always return the main index.html
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
});

const port = process.env.PORT || '3001';
app.set('port', port);

const server = http.createServer(app);

server.listen(port, () => console.log(`API running on 
localhost:${port}`));
module.exports = app;

here's the generated index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-
    fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="/brookeclonts/brookeclonts.com/manifest.json">
    <link rel="shortcut 
    icon" href="/brookeclonts/brookeclonts.com/favicon.ico">
    <title>React App
    </title>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript" src="/brookeclonts/brookeclonts.com/static/js/main.9ffbadeb.js">
    </script>
</body>

</html>

Let me know if you see something I'm not seeing. I'm going in circles. Thanks in advance!

Upvotes: 5

Views: 5190

Answers (2)

Brooke Clonts
Brooke Clonts

Reputation: 465

What was posted here was close to the answer. Thank you for your help everyone! My real problem was that I had forgotten about the .htaccess file. See: https://github.com/facebook/create-react-app/issues/1171 and https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

Upvotes: 1

Ayush Mittal
Ayush Mittal

Reputation: 559

You can also merge directories as:

// Serve static assets

app.use('public', express.static(path.join(__dirname, 'build')));
app.use('public', express.static(path.join(__dirname, 'public')));

// Always return the main index.html

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'index.html'));
});

Upvotes: 1

Related Questions