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/
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 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.
My pagination is working good but the problem is the script automatically getting deleted from index.html page, What may be causing it to delete?
you have to add the script tag associated to this pagination Utility into your index.html file by using a cdn kind of way
<script src="https://raw.githubusercontent.com/michaelbromley/angularUtils/master/src/directives/pagination/dirPagination.js"></script>
or by specifying the local path of this plugin inside your project directory like
<script src="bower_components/angularUtils-pagination/dirPagination.js"></script>
(where bower_components/angularUtils-pagination/dirPagination.js being my path to this utility file inside my project directory)
I'm using Create React App and I would like to use a JS library that isn't available via npm. How would I go about integrating that into my app? I think I can simply add a script tag for it in public/index.html for development purposes but I'm guessing that won't include it in the final build code. Any suggestions would be welcome.
You can add your script to the public folder and include it in the public/index.html file.
<script type="text/javascript" src="%PUBLIC_URL%/my-script.js"></script>
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)