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.
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'm working on web application using React and trying to integrate AdminLTE theme to it. The problem is when the page is loaded and I click on the side menu to expand the submenu until I refresh the page for a few times.
Here is my index.html
<!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`.
-->
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
<link rel="stylesheet" href="dist/css/mine.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<link rel="stylesheet" href="dist/css/mine.css">
<link rel="stylesheet" href="dist/css/toastr.css">
<link rel="stylesheet" href="dist/css/wordpress-admin.css">
<script src="plugins/jquery/jquery.min.js"></script>
<title>KVC Computer</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`.
-->
<script src="dist/js/moment.js"></script>
<script src="dist/js/toastr.js"></script>
<script src="dist/js/sweetalert2.min.js"></script>
<script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
</body>
</html>
and this is the page I've talked about.
enter image description here
I missed something or I did something wrong?
Any advices? Please...
Thank you
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
In order to include everything I need from each bower component I user a library that does just that (it creates script and link tags for each new component I install and puts them in my main blade):
welcome.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}" style="height: 100%">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Work Web App</title>
<link href="{{mix('css/app.css')}}" rel="stylesheet" type="text/css">
<!-- bower-css:start -->
<link href="../assets/bower_components/bootstrap-social/bootstrap-social.scss" rel="stylesheet">
<link href="../assets/bower_components/components-font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="../assets/bower_components/components-font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="../assets/bower_components/bootstrap-social/bootstrap-social.css" rel="stylesheet">
<!-- bower-css:end -->
</head>
<body style="height: 100%">
<div id="root" class="container-fluid wrapper" style="background: #EDF1F5; height: 100%"></div>
<script src="{{mix('js/app.js')}}" ></script>
<!-- bower-js:start -->
<script src="../assets/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../assets/bower_components/jquery/dist/jquery.js"></script>
<script src="../assets/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- bower-js:end -->
</body>
</html>
But whenever I try to access my app I get:
GET http://*****.test/assets/bower_components/bootstrap-social/bootstrap-social.css net::ERR_ABORTED
GET http://w*****.test/assets/bower_components/bootstrap/dist/js/bootstrap.js net::ERR_ABORTED
GET http://*****.test/assets/bower_components/jquery/dist/jquery.js net::ERR_ABORTED
GET http://*****.test/assets/bower_components/bootstrap/dist/js/bootstrap.js 404 (Not Found)
My configuration for my .bowerrc file:
{
"directory": "resources/assets/bower_components",
"scripts": {
"preinstall": "bowinst preinstall %",
"postinstall": "bowinst install %",
"preuninstall": "bowinst uninstall %"
}
}
Laravel comes with a package.json. All JS deps can be installed by npm install and will be downloaded to node_modules folder of your root directory.
To built the JS (uglify, minify and some other stuff) you can use Laravel Mix via npm run dev (for development), npm run watch (for building in dev mode but with a file watcher) or npm run production (for production).
The entry point for all this is resources/assets/js/app.js. There the bootstrap.js file will be imported. (Mind the name here. It has nothing todo with the CSS framework).
Any JS lib you want to include in your application should be required there.
You can find more in-depth information at https://laravel.com/docs/5.5/mix