Getting blank screen after hosting my react project to the server

Question

I have hosted my react project to the server, but after deployment it shows blank screen and on console there is no error shown, but in my localhost it is running fine, This is my index.html file in public folder,

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta  charset="utf-8"/>
  
  <title>React Form Builder </title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <style>
    body {
      font-size: 14px;
      background: #fafafa;
      font-weight: 300;
      color: #404d5b;
       width: 98%; 
        /* height: 100; */
      margin:  20px;
   
    overflow-y: scroll;
    overflow-x: scroll;
    }
    .modal { background: rgba(0,0,0, 0.3);}
    .modal-content { padding: 30px; max-height: 800px; width: 600px ; margin-right:400px ; overflow-y: auto }
  </style>
</head>
<body>
  <script>
    var FORM_ACTION = "/testing";
    var FORM_METHOD = "POST";
  </script>
  <div id="demo-bar"></div>
  <div id="form-builder"></div>
  <div id="show-form"></div>
  <script type="text/babel" src="/app.js"></script>
</body>
</html>

My config file is

 var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/index.jsx',

  output: {
    path: path.resolve('./dist'),
    filename: 'app.js',
    library: 'ReactFormBuilder',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    publicPath: "/"
  },

  externals: {
    //don't bundle the 'react' npm package with our bundle.js
    //but get it from a global 'React' variable
    'react': {
      'commonjs': 'react',
      'commonjs2': 'react',
      'amd': 'react',
      'root': 'React'
    },
    'react-dom': {
      'commonjs': 'react-dom',
      'commonjs2': 'react-dom',
      'amd': 'react-dom',
      'root': 'ReactDOM'
    },
    // 'react-datepicker': 'react-datepicker',
    // 'classnames': 'classnames',
    // 'jquery': 'jquery',
    'bootstrap': 'bootstrap'
  },

  resolve: {
    extensions: ['./mjs', '.js', '.jsx', '.scss', '.css', '.json'],
    alias: {
      "jquery": path.join(__dirname, "./jquery-stub.js")
    }
  },

  module: {
    rules: [
      {
        exclude: /node_modules/,
        test: /\.js|.jsx?$/,
        use: [
          { loader: 'babel-loader' }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader', options: {
              sassOptions: {
                includePaths: ['./node_modules'],
              },
            }
          }
        ]
      },
    ]
  },
  performance: {
    hints: false
  }
};

I have tried this solution https://stackoverflow.com/a/56055153/14849817 but it doesn't help!

Where is it hosted? AWS / Netlify / Apache Server or anything else? — Khushbu Patel, May 13 '21 at 05:41

score 0 · Answer 1 · answered May 14 '21 at 03:06

TLDR;

Can you try this in .htaccess file

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

I reckon, this is an issue with your hosting on Apache server and not React.

Step 1 : Create your app

$ npm install -g create-react-app 
$ create-react-app my-app

Step 2 : Build it for production

$ cd my-app
$ npm run build

Step 3 : deploy copy and paste everything in build folder to your server edit /etc/httpd/conf/httpd.conf

<Directory "/var/www/html">
...
AllowOverride All
...
</Directory>

create a “.htaccess” file in html directory and add this snippet :

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]```

or edit /etc/httpd/conf/httpd.conf

<Directory "/var/www/html">
 #
 # Possible values for the Options directive are "None", "All",
 # or any combination of:
 #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
 #
 # Note that "MultiViews" must be named *explicitly* --- "Options All"
 # doesn't give it to you.
 #
 # The Options directive is both complicated and important.  Please see
 # http://httpd.apache.org/docs/2.4/mod/core.html#options
 # for more information.
 #
 Options Indexes FollowSymLinks

 #
 # AllowOverride controls what directives may be placed in .htaccess files.
 # It can be "All", "None", or any combination of the keywords:
 #   Options FileInfo AuthConfig Limit
 #
 AllowOverride All

 Options -MultiViews
 RewriteEngine On
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteRule ^ index.html [QSA,L]

 #
 # Controls who can get stuff from this server.
 #
 Require all granted
</Directory>

Getting blank screen after hosting my react project to the server

1 Answers1