I am creating one system using React and I am still new to React. I need to add js file in my index.html where that js file is located in the src folder. I need to import this js file in order to make my system works. Does anyone know how to solve my problem? Thanks in advance.
This is how I import my js file. I think there is something wrong with my path. Does anyone know the correct path to import my js file?
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/#coreui/coreui/dist/js/coreui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js" crossorigin></script>
<script type="text/javascript" src='../src/js/index.js'></script>
</body>
</html>
As you can see from the picture above, my index.js is located under the src folder.
As i think this is not good way to do this. your trying to add your ./src some js file to ./public folder index.html
this is not recommended way. but if you want add some external links, put it under ./public folder and import it but this not recommended way.
ref : sample project for external import
Path should be
<script src='../src/js/index.js'></script>
You need to go up one folder ('../') to be at the same spot as public and src then go into src/js/index.js
Related
My question involves the index.html that is generated after ng build --prod. This is the one i get after running that command:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kudoshealth Dashboard</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="assets/css/all.min.css" rel="stylesheet" type='text/css' />
<link rel="stylesheet" href="styles.f0d4a2f6b4b57a8b1a74.css"></head>
<body>
<app-root></app-root>
<script src="runtime-es2015.5e3efc57355ca9fa37ac.js" type="module"></script><script src=""></script><script src="runtime-es5.5e3efc57355ca9fa37ac.js" nomodule defer></script><script src="polyfills-es5.c9393ad6cf868cd989cc.js" nomodule defer></script><script src="polyfills-es2015.70587aa54d3cd9f0a3b6.js" type="module"></script><script src="scripts.c19d1667b1375f71590b.js" defer></script><script src="main-es2015.654b4a3d66cfb9c8fa63.js" type="module"></script><script src="main-es5.654b4a3d66cfb9c8fa63.js" nomodule defer></script></body>
</html>
This angular project works fine on localhost, but once the dist output has been uploaded to the S3 bucket, there seems to be some issues such as this:
S3 deployed error
I ensure you that the login i am using is correct. All uploaded files are made public on the bucket too. The strange error is that there is no 8-es2015.8e909eab71372e40cabe.js file in the dist. Im really sorry if the error is obvious or if I'm making a rookie mistake, but I've been stuck on this error for a few days and any help would be appreciated.
My issue was a long persisting one in the background. The issues was resolved by changing my environment.prod.ts redirect url. It was set to an old one from a old branch on the repo that was redundant.
So, I am trying to use Bootstrap in a React app. The Bootstrap CSS works properly, but anything that requires Bootstrap JS files doesn't work (dropdowns, modals, etc.) This is my code. I even tried copying the starter template and using that instead. It doesn't work.
<!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" />
<!--
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="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
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>React App</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</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`.
-->
<!-- Bootstrap JS -->
<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.3/umd/popper.min.js"
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
<!-- FontAwesome JS -->
<script src="https://kit.fontawesome.com/8f8a8c35a9.js" crossorigin="anonymous"></script>
</body>
</html>
What am I doing wrong? Thanks for all your help! :)))
You are using different versions of Bootstrap for CSS and JS
5.0: https://getbootstrap.com/docs/5.0/getting-started/download/#cdn-via-jsdelivr
4.6: https://getbootstrap.com/docs/4.6/getting-started/download/#jsdelivr
I am trying to deploy my application from windows to Linux environment. In my application index.html as follows which is loading the json file from windows directory.
<!DOCTYPE html>
<html lang="en">
<head><link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>
<link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table-all.min.css">
</head>
<body><script src="../Config/myJson.json"></script>
<div id="test"></div>
<script src="bundle.js"></script>
</body>
</html>
Now I am trying to load myJson.json file in linux directory /opt/config/myJson.json but it's not working.
Basically I want to read json file from outside the war. my war is deployed in Wildfly.
Could you tell me what am i missing here?
For security reasons, you cannot directly access local files unless HTML opened with the File protocol. It is recommended that you use nginx or tomcat as a static file server to access.
I can't link my css and js files to my html file.
The most common problem I've seen with other peoples codes was that their files were not in the same folder but mine are and yet it is still not working.
<!DOCTYPE HTML>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
If you are using the following:
<!DOCTYPE HTML>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
I expect your folder structure to be as follows:
www/
index.html
app.js
style.css
Is that correct?
Your code seems OK but what is the exact issue you face? Both CSS and JS not loading?
FYI the files do not need to be in the same directory. Usually, they are separated into folders to keep things clean:
www/
index.html
js/app.js
css/style.css
Do you see any errors in your browser console? That could help you find the mistake
try this make the links as simple as possible e.g
and for js use the script tag within your Html and see if it working then you go for the linking
My studygroup and me build a server with the spring boot framework. I build my quasar project and packed the index.html from /dist into the templates folder of the Spring project. All other files from /dist i packed into src\main\resources\static from Spring project.
Now i want to return my created login page from the quasar project. Unfortunatelly i just get the code of the Index.html in the Console says:
Resource interpreted as Document but transferred with MIME type text/javascript: "http://localhost:8080/".
Here my Index.html, maybe it helps:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum- scale=1,minimum-scale=1,width=device-width" />
<title>Quasar App</title>
<link rel="shortcut icon" type="image/x-icon" href="statics/favicon.ico" />
<link href="app.7d472f6ee58ddd9e9299c9b7cfcf0c2b.css" rel="stylesheet" />
</head>
<body>
<div id="q-app"></div>
<script type="text/javascript" src="js/manifest.js"></script>
<script type="text/javascript" src="js/vendor.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Put the quasar build files under main/resources/static of your project.
When you run the spring boot app in dev mode, Spring Boot will automatically take your index file.
In production, you just package into a jar file using maven build