Question posted in
Some documentation to get you started can be found here.

Blank page when I run ReactJS build on Apache server

enter image description hereenter image description hereI try to figure out a way to display a test page. But there is no success until now. The way I have tried is with npm run build. I have created a .htaccess file , but still it returns me a blank page (without any errors in the console). Also i have inserted in my package.json the props "homepage": "localhost/build-interface", Anyone have some ideas how to fix the problem?

index.js

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

<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="localhost/build-interface/favicon.ico" />
    <meta name="viewport"
        content="initial-scale=1,maximum-scale=1,minimum-scale=1,target-densitydpi=device-dpi,user-scalable=no" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="localhost/build-interface/manifest.json" />
    <title>React App</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link href="localhost/build-interface/static/css/2.df50b353.chunk.css" rel="stylesheet">
    <link href="localhost/build-interface/static/css/main.f68e1149.chunk.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <p>test here</p>
    <div id="root"></div>
    <script>!function (f) { function e(e) { for (var r, t, n = e[0], o = e[1], u = e[2], l = 0, i = []; l < n.length; l++)t = n[l], c[t] && i.push(c[t][0]), c[t] = 0; for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (f[r] = o[r]); for (s && s(e); i.length;)i.shift()(); return p.push.apply(p, u || []), a() } function a() { for (var e, r = 0; r < p.length; r++) { for (var t = p[r], n = !0, o = 1; o < t.length; o++) { var u = t[o]; 0 !== c[u] && (n = !1) } n && (p.splice(r--, 1), e = l(l.s = t[0])) } return e } var t = {}, c = { 1: 0 }, p = []; function l(e) { if (t[e]) return t[e].exports; var r = t[e] = { i: e, l: !1, exports: {} }; return f[e].call(r.exports, r, r.exports, l), r.l = !0, r.exports } l.m = f, l.c = t, l.d = function (e, r, t) { l.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, l.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, l.t = function (r, e) { if (1 & e && (r = l(r)), 8 & e) return r; if (4 & e && "object" == typeof r && r && r.__esModule) return r; var t = Object.create(null); if (l.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: r }), 2 & e && "string" != typeof r) for (var n in r) l.d(t, n, function (e) { return r[e] }.bind(null, n)); return t }, l.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return l.d(r, "a", r), r }, l.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, l.p = "localhost/build-interface/"; var r = window.webpackJsonp = window.webpackJsonp || [], n = r.push.bind(r); r.push = e, r = r.slice(); for (var o = 0; o < r.length; o++)e(r[o]); var s = n; a() }([])</script>
    <script type="text/jsx" src="localhost/build-interface/static/js/2.cd99b486.chunk.js"></script>
    <script type="text/jsx" src="localhost/build-interface/static/js/main.eebb9fce.chunk.js"></script>
</body>

</html>
Tags:

2

Answers


  1. 0

    When you have a tag like this:

    <script type="text/jsx" src="localhost/build-interface/static/js/2.cd99b486.chunk.js"></script>

    It’s not looking in http://localhost, it’s actually looking in the folder /localhost/.... Prepend your script src with // to have it look in the correct folder (Or omit it entirely, and just use /build-interface/...). You would be able to see this in the network tab, as your scripts should be 404’ing.

    Login or Signup to reply.
  2. 0

    Maybe my problem is similar to yours.

    I was using the information from create-react-app and this one.

    Using Chrome or Firefox inspect, the console informed that the CSS or JS files were using the wrong file type content (text/html). Searching google you will find many results informing that you just need to add to your .htacces:

    AddType text/css .css

    The problem was that my CSS and JS request were using the RewriteRule, meaning that my CSS and JS request, internally to apache, were returning index.html content.

    I solved this issue including in the .htaccess.

    RewriteCond %{REQUEST_URI} !^.*.(css|js|png|jpg|gif|txt)$ [NC]

    The final .htaccess that I am using is:

    Options -MultiViews
RewriteEngine On
AddType text/css .css
AddType text/javascript .js
RewriteCond %{REQUEST_FILENAME} !-f [OR]
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^.*.(css|js|png|jpg|gif|txt)$ [NC]
RewriteRule . index.html [NC,QSA,L]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search