I have a react application , which I created with Create React App. The app is working fine in development, but in production , the CSS styles are not getting applied. I noticed that, the generated index.html file has the link tag for the bundled stylesheet (main.e72c9739.css), but browser is not downloading the CSS ( there is no network invocation in the dev tools ). The file does get downloaded, when I try manually by entering the address of the URL.
Here is the index.html code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<base href="/proxy/myusername/services/someserviceid/proxy/8098/"/>
<link rel="icon" href="favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="logo192.png"/>
<link rel="manifest" href="manifest.json"/>
<title>React App</title>
<script defer="defer" src="/proxy/myusername/services/someserviceid/proxy/8098/static/js/main.01dd9c66.js"></script>
<link src="/proxy/myusername/services/someserviceid/proxy/8098/static/css/main.e72c9739.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<h1>Hello</h1>
</body>
</html>
One difference I noticed was, in case of development, the css is not explicitly referred via link tag, all the CSS definitions are available in the bundle.js file (along with some code of CSS_LOADER_EXPORT module).
P.S. The application is deployed in a subpath, and I am using nginx for forwarding the request to react app running on a different port. I also do response modification for appending the base path of the URL.
Related
I have a Tomcat 10 setup in a development environment with a custom 403 error page. My 403 error page look something like this.
<html>
<head>
<link rel="stylesheet" type="text/css" media="all"
title="Default" href="default/style-1.0.2.css" />
<link rel="alternate stylesheet" type="text/css" media="all" title="Paper White"
href="default/print-1.0.1.min.css" />
<title>403 Forbidden</title>
</head>
<body>
<h3>You do not have required permissions to view this page.</h3>
</body>
</html>
When I reproduce this, I am getting a 403 error while accessing external CSS files.
403 error screenshot
My theory is that as the tomcat recognizes this request as 403, it is not allowing the request to access the underlying CSS resources as well.
Is there a way to bypass this?
I have ubunto server working with nginx,
and after running npm run build in my react project, the build directory created with the path static/css/main.ca4e3296.chunk.css -> and that is the main css file of the project.
After ftp that build directory to the server, I checked this file and it transfered successfully, but on the production it's value is all the index.html content (I have no idea why).
I also copy paste all the static/css/main.ca4e3296.chunk.css file's content from the server to the browser and it's all the css worked again, which means the problem here is that file that it's value changes from the server to the browser.
Also, in the console, I get this message:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://bucard.co.il/static/css/main.ca4e3296.chunk.css".
By the way, this is my index.html page if it's couses the issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bucard | Digital Business Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="canonical" href="https://bucard.co.il/" />
<link rel="icon" id="favicon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Assistant:wght#300&display=swap" as="style"
onload="this.rel='stylesheet'" />
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" as="style"
onload="this.rel='stylesheet'" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<meta name="title" content="Bucard | Digital Business Card" />
<meta name="description"
content="Bucard - Digital Card Website" />
<!-- some analytics -->
<meta property="og:locale" content="he_IL" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Bucard | Digital Business Card" />
<meta property="og:image" content="https://bucard.co.il/favicon.ico" />
<meta property="og:description"
content="Bucard - Digital Card Website" />
<meta property="og:url" content="https://bucard.co.il/" />
<meta property="og:site_name" content="Bucard" />
</head>
<body>
<div id="root"></div>
</body>
</html>
Any help please ? Or maybe it's Nginx problem?
This problem causes only on production.
edit: Just saw that removing GENERATE_SOURCEMAP=false from .env file solved the problem, but the components are shown again. so that's temporary solution.
I just looked at the source code of your website, there's no CSS file named main.ca4e3296.chunk.css there.
It's probably the nginx routing settings that causes the redirect to your 404 page, which is fine.
You need to remember that with each new build the output files' names change, and the main index.html file is updated as well to link to the new files, so main.ca4e3296.chunk.css may have existed sometime in the past but not anymore. Currently, both 2.b42aba3b.chunk.css and main.a6f3b637.chunk.css are responding as expected.
If I were you I'd read more about your bundler (most likely Webpack)
I am developing Angular application with DotNet Core. In the development environment Application works fine, but upon publishing to IIS server receiving the following Error(Internal error while loading script file in index.html)
IMG->
Website Error image
IIS folder structure is a follows.
inetpub folder image
inetpub folder image
Index.html code is a follwos
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebPayzUI</title>
<base href="/WebPayz/ClientApp/dist">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.0243bd00007c5e1092e8.css"></head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="runtime.a66f828dca56eeb90e02.js"></script><script type="text/javascript" src="polyfills.83183756596ff1996025.js"></script><script type="text/javascript" src="scripts.385b291e179030219400.js"></script><script type="text/javascript" src="main.e9e2c4382e2ff45e82db.js"></script></body>
</html>
base href="/WebPayz/"
update base href to the above in your index.html file
how to use bootstrap files in Apache cordova apps?
Is there any setting to do
in visual studio 2015 css intellisense not working
how to use bootstrap files in Apache cordova apps?
Is there any setting to do
First, you need to download the bootstrap.css or bootstrap.min.css file. Then you can reference it in your index.html file:
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!--reference bootstrap.min.css file here -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>BootStrapDemo</title>
</head>
<body>
<div class="app" style="">
<button class="btn btn-danger">BootStrap Button</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
in visual studio 2015 css intellisense not working
I guess you didn't reference it correctly. If you referenced it correctly, you will get the intelligence like this:
I am trying to run my application using the lite-server node package but it won't load scripts from the parent directory.
I want my index.html in the /src folder because it could be possible in the future to generate a different file to /dist. /node_modules and systemjs.config.js need to stay in the root directory as they won't change.
File structure:
The src/index.html:
<html>
<head>
<base href="/">
<title>task manager</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="../systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Running lite-server inside the /src dir:
The node modules do exist. If I move the required files to the child directory itself, /src, the server runs fine with no 404s. Is this a problem with my lite-server or systemjs settings?
You need to properly configure the lite-server.
In the project root, create a file called bs-config.json with the following content:
{
"port": 8000,
"server": {
"baseDir": "./src",
"routes": { "/": "./" }
}
}
Now you have to run the lite-server in the same directory where is the bs-config.json file.
If you want to know more about lite-server config, read the Browsersync Options documentation.
Also, with this configuration, you can change the path of your script in the index.html file:
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>