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.
Related
I have created a new next.js project. Is it possible to have an accessible static html page "outside" the project?
For example the structure would look like this:
.next
components
node_modules
pages
public
styles
aboutus
Now looking at the folder /aboutus/, it will have a structure like this:
css (folder)
js (folder)
images (folder)
index.html
Where the index.html references the css, js and the images.
But when i call http://localhost:3000/aboutus it gives me a 404 error.
Already tried this setup locally, but didn't work.
It turned out a 404 error.
I expect that to work.
Is it possible to have an accessible static html page "outside" the project?
No. Only files that are in the pages folder are generated as pages. pages in NextJS
The closest you can get to accomplish that is by running npm run export and manually insert your "aboutus" folder in the "out" folder. But the project wont have the benefits of These features.
In case the .js is not Next related, have you tried to put the aboutus folder in public/aboutus ?
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?
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 created create-react-app and i placed index.html and css in public folder and imported css and js using link and script tags but not working completely, could any one please help me on this.
I have an html file that I've turned into a string to be used with dangerouslySetInnerHTML. Everything renders fine except for the images within that html string. I can't seem to figure out what path I should provide. Currently I have them in a separate assets folder while the js file is in a dir one level down.
Your React .js files' location are irrelevant to the final address you need to provide to your src attributes. That's because a React up goes through a build process (development build or production build) where all the js files are bundled together and your public folder structure will be very different than the folder structure you have in your development (not to be confused with a development build).
In a normal React app setup (say we create it with create-react-app), your final html is rendered in public/index.html where public is the root of your webserver. Now, let's assume you have your images in a folder called assets directly at the root of your webserver. Then your folder structure will look like this:
public/
index.html
assets/
img1.jpg
img2.jpg
Now you need to declare your img tags as follows:
<img src="/assets/img1.jpg">
Hope that helps.