TutorialMeta
Ad

React Website Created Using Create-react-app Deployed On Apache Tomcat Giving Blank Screen

- 1 answer

Created a react app using create-react-app. Everything works fine on local system but getting issues when deploying it on Apache tomcat. Below are the steps i followed for deployment:

  1. Added "homepage":"https://websiteName.com/react_web" in package.json.

  2. Create .htaccess file in public folder of project and added below code

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

  3. Run "npm run build" to create build files.

  4. Copied the content of build file into 'react_web' folder in Apache tomcat.

There are no errors in console of browser.

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" target="_blank" rel="nofollow noreferrer" href="//websiteName.com/react_web/manifest.json"><link rel="shortcut icon" target="_blank" rel="nofollow noreferrer" href="//websiteName.com/react_web/favicon.ico"><title>React App</title><link target="_blank" rel="nofollow noreferrer" href="//websiteName.com/react_web/static/css/main.d17afb7e.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="//websiteName.com/react_web/static/js/main.b302e125.js"></script></body></html>

Below are few pics from browser console.

enter image description here

I am using BrowserRouter for routing. Do i have to change something there.

Also i see all the project files being loaded properly in console.

Any suggestion or direction will be helpful.

Ad

Answer

I found the issue. Was missing below part.

Note: If you are using [email protected]^4, you can root <Link>s using the basename prop on any <Router>.

<BrowserRouter basename="/calendar"/>
<Link to="/today"/>
// renders <a target="_blank" rel="nofollow noreferrer" href="/calendar/today">

ref: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad