I am working on a React project. I want my CSS to be embedded into HTML itself without having a network call for CSS.
CSS
body{
background-color: #000000;
}
into one file like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/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="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<style>
body{
background-color: #000000;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I have no knowledge of webpack
I have setup customize-cra and have config-override.js file.
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
May be this is what you need "react-style-tag"
From your post I think you want to have your styles inside the of your index.html file
Related
I have a nx workspace where I have several react apps. One of them is payment and I want to serve it under mybaseurl.com/payment . The static assets (css, js) are failing to load because they are still pointed at root in the index.html. I cannot seem to change the PUBLIC_URL to "/payment" so that all the static files are served from mybaseurl.com/payment instead of mybaseurl.com.
I have tried putting PUBLIC_URL="mybaseurl.com/payment" in the .env file as well as, PUBLIC_URL="mybaseurl.com/payment" nx build payment --prod but nothing seems to have any result.
How can I change PUBLIC_URL here during build time?
For ref, use of PUBLIC_URL: https://create-react-app.dev/docs/adding-custom-environment-variables/
Example code:
Currently the build is generating the following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<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.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>
But I want the build to generate the follwing in the index.html,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="/payment/styles.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="/payment/main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="/payment/runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="/payment/polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="/payment/main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>
The easiest way to achieve this is to change the base tag by editing apps/payment/src/index.html:
<base href="/payment/">
The browser will then prepend the path to those assets.
i set the "baseHref" property in the production config in the project.json and then it appeared in the generated index.html
When i run the npm run build its give me the build but when i place it in the tomcat webapps its so me error
Failed to load resource: the server responded with a status of 404 ()
But when i place the . in html file its work.
Code its not working:-
<head>
<meta charset="utf-8" />
<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="8080/build/logo192.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="manifest" href="8080/build/manifest.json" />
<title>GV App</title>
<script defer="defer" src="8080/build/static/js/main.99658d36.js"></script>
<link href="8080/build/static/css/main.0dd94b59.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
Code its working when i place the dot like href="./logo192.png" :-
<head>
<meta charset="utf-8" />
<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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="manifest" href="./manifest.json" />
<title>GV App</title>
<script defer="defer" src="./static/js/main.55119f6e.js"></script>
<link href="./static/css/main.d962d6c3.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
I had build an app using create-react-app. And our server is set up as such that all files except index.html are in a folder named static.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./static/favicon.f99d69b1.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>App</title>
<script type="module" crossorigin src="./static/index.81e5d079.js"></script>
<link rel="modulepreload" href="./static/vendor.ba9c442b.js">
<link rel="stylesheet" href="./static/index.f28d7853.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
So JS file's path is ./static/js/main.836d2eb0.js.
And then I decided to go for Vite.
As you may know, Vite's default assets' directory is callled assets. I managed to change it to static by changing build.assetsDir to static in vite.config.js
build: {
assetsDir: "static",
outDir: "./../backend/src/main/resources/static/app/",
},
I changed the output's directory too.
After runing npm run build, all of the files are generated in the correct directory. However, CSS, JS, and other assets have wrong path, for ex, my JS file's path is /static/vendor.ba9c442b.js It lacks dot(.) before the first slush
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/static/favicon.f99d69b1.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fiken Kundestøtte</title>
<script type="module" crossorigin src="/static/index.81e5d079.js"></script>
<link rel="modulepreload" href="/static/vendor.ba9c442b.js">
<link rel="stylesheet" href="/static/index.f28d7853.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
info: It is a spring boot app.
So how to fix the files' path?
Configure the base URL to be ./:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
base: './', 👈
})
demo
Favicon not showing up when running my React project. However, when I click index.html, the icon appears. When I call npm start, when localhost opens I see my pages without icons. I tried every way and even though I made many changes, I could not reach the result. I will be glad if you help.
The file structure of my project is as follows.
file structure
and index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Trying Project</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Clear the cache in your browser, this should fix the issue.
Your icons should be in public folder. For importing correctly you have to start all your paths with "%PUBLIC_URL%/myIcon.ico" and this "%PUBLIC_URL%" will be resolved into public folder (where your index.html is placed by default).
(inside index.html on public folder)
exemple: <link rel="icon" href="%PUBLIC_URL%/logo.png" />
Just add version parameter for the favicon path to force your browser to refresh the pic
<link rel="icon" href="favicon.ico?v=2" />
Then you can delete it, the icon will remain.
I'm having issues launching a React.js app built with Gulp.
I ran npm install even npm update, but when I go to the browser, I do not see the app, but instead I see a blank screen.
Also, I noticed that gulp build produced a blank index.html file.
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Default</title>
<meta name="description" content="">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="./app.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="registration-form"></div>
</div>
<script src="./app.js"></script>
</body>
</html> -->
Please advise.