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.
Related
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 am building my Ionic application for production. To do so, I am using ionic build --prod command and the application is building successfully, But when I am running my application on the server then it is giving me errors of:
cordova.js, main.js, Vendor.js.
(Please ignore the errors of Firebase)
The screenshot of network tab is:
As I am seeing my build folder, there are only two files that are generated after running the above ionic command i.e Pollyfills.js and 'sw-toolbox.js'.
But when I am using Ionic serve command then the build folder consists of all the files viz Pollyfills.js, main.js, main.css, vendor.js and 'sw-toolbox.js'.
I have already tried the various commands like :
ionic cordova build android --prod --release but it also results in only two files in Build folder and hence giving an error on console.
What is the issue and how can I make this app suitable for production mode.
Kindly have a look on my index.html file where I am giving the paths of various js files:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>BOS</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#000">
<!--Share this Code -->
<script src="//platform-api.sharethis.com/js/sharethis.js#property=5b1fb235e4b7fb00118c596f&product=sticky-share-buttons"></script>
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href= "assets/imgs/logoSplash.png",>
<link rel="apple-touch-startup-image" href="assets/imgs/logoSplash.png">
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<!-- cordova.js required for cordova apps (remove if not needed) -->
<script src="cordova.js"></script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>
<link rel="preload" href="build/main.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<noscript>
<h3 style="color: #673ab7; font-family: Helvetica; margin: 2rem;">
Sorry, but app is not available without javascript
</h3>
</noscript>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
I have found the solution of my problem. I went to the node_modules -> #ionic -> app-scripts -> config -> webpack.config
In that file, I had commented one line of code :
function getProdLoaders() {
if (process.env.IONIC_OPTIMIZE_JS === 'true') {
// return optimizedProdLoaders; <= This one
}
return devConfig.module.loaders;
}
Now, it is working.
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
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
<head>
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
<script type="text/javascript" src="js/less.js"></script>
</head>
I get an error that it needs to be http:// instead of file://. So does this mean I have to install apache and/or node?
Are there any links to documentation? The less.css website isn't explicit enough for me.