My question is similar to the question Relative path in index.html after build, except that it happens in my development environment, and the index.html has:
http://dev.local:8100/app/index.html (in react public folder)
<script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
I can make it work if I build react, and that's how it work on production. But for development it is better if I can make it work just using react-scripts start (yarn/npm).
I have tried changing homepage in package.json and start_url in manifest.json, but couldn't get it to work.
I need the index.html to be:
<script src="static/js/bundle.js"></script><script src="static/js/vendors~main.chunk.js"></script><script src="static/js/main.chunk.js"></script></body>
Any suggestions?
Related
I'm starting to build a react project that includes bootstrap.
I am using an assets folder from BootstrapMade.com
the bootstrap works find when I copy the assets folder inside the public directory and include the js files in my index.html using:
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
But, when I copy the assets folder to the src folder and try to include the js files in my index.html using:
<script src="../src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
The bootstrap won't work. and I've been told that it's not advisable to put the assets folder in the public directory.
I am using create-react-app with vscode.
You will need ES modules for this
check more on ES modules here: https://webpack.js.org/guides/ecma-script-modules/
Webpack server does not serve the content from inside src. It only bundles them. So you cannot use <script src="path_to_src"> to access its contents. But <script src="path_to_public"> can be used for public directory because contents of public are served as static assets by webpack dev server.
I have copied js (handy.min.js) in my project's public directory
I included it in my index.html using %PUBLIC_URL%/handy.min.js
But this file not found when I run my application.
I created project using create-react-app.
No webpack specific config
Any suggestion how to make this file available after I run react build profile.pro
You should add this to your index.html file:
<script src="%PUBLIC_URL%/handy.min.js" ></script>
further reading: https://www.geeksforgeeks.org/how-to-use-files-in-public-folder-in-reactjs/
I have build a react app with some external libraries and would like to include it into an existing project that has nothing put JSP's.
Running the command react-scripts build generates files in a build folder.
build/asset-manifest.json
build/favicon.ico
build/index.html
build/manifest.json
build/precache-manifest.23802519359aee1ffa0ec2f3ba332c80.js
build/work.js
build/static
build/tab.png
What do I include and how do I include these files.
I have tried to add the index.html into index.jsp but is doesnt seem to work. Although I do see the title change to what is in my react app.
<%#include file="index.html"%>
or do I need to include all the files similar to how I added index.html
The index.html file does load a couple of script files in the build/js folder like so below.
<script src="/static/js/2.57fa75d6.chunk.js"></script><script src="/static/js/main.fe75a1b9.chunk.js"></script>
I have project with similar requirements as yours.
Some info needs to be render at server, but could not find proper way to do it in java, so I created maven plugin for that:
https://github.com/maasdi/react-assets-maven-plugin
You can try check it out, hope that can help with yours.
I have built my react js app with create-react-app configs and it works fine in development build of React.
I built that with npm build command and now i have build folder.
this web page is static (server-less), Now I want to know how to use that and where put files in Cpanel.
After the bundle realized by webpack, you can check the transpiled and minified version inside the build folder. You should upload all the content to your public_html or another folder.
And the meaning of server-less is totally different than you're using. Check this article to understand what it is: What is serverless.
I do not use CRA boilerplate since i have my own but in your case, you should find where your js bundle is. You can find the bundle location in the webpack config. Then append that to your html somehow like this:
<div id="root"></div>
<script src='your-js-bundle'></script>
Assuming that somewhere in your code, you are appending your js code into a div like this:
const element = <h1>Hello, world</h1>; // assuming element is your entry point
ReactDOM.render(element, document.getElementById('root'));
That works if its just simple react project your working on (No SSR and such)
I am using create-react-app to build an application and when I run npm run build it creates a build folder with static folder inside it which is expected.
build--> static
But when I see the index.html file inside the build folder, the path to assets is /static and not /build/static which is why the page does not load properly as it is missing the assets .
Is there any config setting I can do to fix this problem ?
If all you want is to run your app, all that you have to do is run the command: npm start
But, if you are really trying to prefix the static references to upload your code on an specific subdirectory you should add on your package.json the homepage you want to use on your create-react-app.
So, if you want your react app to use /build in the beginning of each reference you should add the following line to your package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"homepage": "/build",
...
}
The following message is displayed when you generate your build without the homepage in the configurations:
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build```
But when I see the index.html file inside the build folder, the path to assets is /static and not /build/static
This behaviour is expected.
You're supposed to deploy the build folder and serve the application from it. Since index.html is inside build, it would be served for /, and files in build/static/* will be served for /static/*.
For more specific instructions for this, please read the Deployment section of the User Guide.
It sounds like you're trying to use unimported assets.
I prefer to create an assets folder and place these sort of files here, and then import/use them accordingly.
From the documentation:
import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
If you really want to use the public folder, you can use the PUBLIC_URL variable.
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">