I am having a react app. At the time of build generation, in my build folder I am getting below code:
<!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="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>React App</title>
<script defer="defer" src="/static/js/main.8d8de8a8.js"></script>
<link href="/static/css/main.073c9b0a.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Now, Instead of the URLs starting with /static I want them to add a prefix automatically when build is generated such as /test/static in src as well as href tag. Please help. Thanks in advance.
To configure the react build, do the following:
run: npm run eject or yarn eject
The repository has to be at the latest commit, otherwise the command will not generate the configuration files. The command will generate configuration files for create-react-app.
Once you see that the files are generated, look for the following file:
config/webpack.config.js
With your text editor look for something like static/ you will see that it is the path configured for the static files. You can replace it with a route of your choice.
Warning: A configuration error in this file may cause your project not to compile or the development server not to start.
Related
For my React-website, I need to document all the packages I am using.
For this, I want to use webpack-license-plugin (https://www.npmjs.com/package/webpack-license-plugin)
However, I recently switched to using "create-react-app" which means there is no config-file I can directly modify.
I tried to follow this answer (create react app Configuration file after build app) which tells me to create a config-file, use the plugin there and load it in my index.html-file.
I would have expected when running the build somehow the inside config-file by me specified output-file would appear inside the build-folder, BUT there is nothing.
I did not find any other guidance, other than this question (Customize webpack plugins using create-react-app). However, I would like to avoid making use of new tools, if possible.
Generally, I just wonder about the simplest way how to achieve what I set out to do. Thanks for any help!
Here is the content of the extra config-file I added to my public folder (beside the index.html):
const LicensePlugin = require("webpack-license-plugin")
module.exports = {
plugins: [
// there might be other plugins here
new LicensePlugin({ outputFilename: "thirdPartyNotice.json" })
]
}
And here is the content of my index.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" />
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Cardo&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script src="%PUBLIC_URL%/config.js" type="text/javascript"></script>
<div id="root"></div>
</body>
</html>```
here's the link to my GH page
https://filipdimko11.github.io/crypto-tracker/
When running it locally, the project renders everything. After hosting it on GH pages, though, the website doesn't render anything (no errors in the console either).
I tried making an empty commit, saw it as another solution on StackOverflow, but that didn't fix it. Using ReactJS, thanks.
The problem is because in your index.html file you are referencing your assets like /static/js/main.2227a53b.js which makes sense when you are running locally.
But when you deploy to github pages, the directory structure is different. To make it work properly you'd need the routes to be prefixed with crypto-tracker/ For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet"
/>
<meta name="description" content="Your best crypto tracker!" />
<link rel="manifest" href="/manifest.json" />
<title>Crypto Tracker</title>
<script defer="defer" src="crypto-tracker/static/js/main.2227a53b.js"></script>
<link href="crypto-tracker/static/css/main.f53fb378.css" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Depending on what build tool you are using, this is probably configurable.
I am converting an existing bootstrap theme to react js. Having copied the required folders (css, fonts, images, and js) into react public folder, and add the link to each files into public/index.html file as seen below;
<!-- public/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="description" content="Web site created using create-react-app" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="%PUBLIC_URL%/fonts/flaticon/flaticon.css">
<link rel="stylesheet" href="%PUBLIC_URL%/fonts/font-awesome/fontawesome.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/vendor/slick.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/vendor/bootstrap.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/custom/main.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/custom/index.css">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="%PUBLIC_URL%/js/vendor/jquery-1.12.4.min.js"></script>
<script src="%PUBLIC_URL%/js/vendor/popper.min.js"></script>
<script src="%PUBLIC_URL%/js/vendor/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/js/vendor/slick.min.js"></script>
<script src="%PUBLIC_URL%/js/custom/slick.js"></script>
<script src="%PUBLIC_URL%/js/custom/main.js"></script>
</body>
</html>
It appears that the css files in the head session work correctly except for the js files in the body session. After inspecting the page for error via browser, i found this..
DevTools failed to load source map: Could not load content for http://localhost:3000/css/vendor/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for http://localhost:3000/js/vendor/popper.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for http://localhost:3000/js/vendor/bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
How can i fix this as nothing seem to be working after several attempt including disable/enable javascript/css from browser inspect -> settings (gear) as well as using npm install bootstrap jquery popper.js
There is a line of <div style={height: 50px}> where height is 50px i want to make it 0 in code but where it is located?
index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/logo2flat.png" />
<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/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo1922.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap" rel="stylesheet">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
There is a white spacing showing and height was the reason so I want to make it 0. I try to find in different files but i don't know where exactly it is
Any help will be appreciated
Thanks In Advance
I am assuming that you want to find react component responsible for that. You may want to use components tab in developer tools to find out which component is responsible for rendering a particular element. link - https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en With that you can hover on an element and corresponding component gets highlighted.
This looks something like following -
more information about how to use that - https://reactjs.org/blog/2014/01/02/react-chrome-developer-tools.html
When I get under a subdirectory in react router index.html links and scripts fail to load.
:1 Refused to apply style from 'http://localhost:3000/solutions/css/default.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
When i'm in /foo routes, its fine.. But when I get under /foo/foo, I get this error. This route for example is /solutions/home. In the console error it get to /solutions and then from there tries to import scrs from index.html.. Am i missing something?
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" sizes="16x16" />
<meta
name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="css/default.css" />
<link rel="stylesheet" href="css/component.css" />
<title>Neuroelectrics</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
It was an easy one.. after thinking and trying to debug a lot about React and React router, I realized that it was nothing with it (dumb), just added %PUBLIC_URL% to all linking files. The problem was that with react router index.html was trying to fetch these files under the router routes.