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
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.
Here is my code in the index.html. It's just a simple create-react-app and I added some script tags for firebase. Not sure why the index.pack.js script tag is saying a syntax error for some reason.
<!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" />
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-app.js"></script>
<!--
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>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-firestore.js"></script>
<script src="/src/index.pack.js"></script>
<!--
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`.
-->
</body>
</html>
This line right here is saying there's an error and I don't know how to fix the code since it's a script tag and supposedly it's reading it wrong
<script src="/src/index.pack.js"></script>
You are missing . at the beginning of path.
<script src="/src/index.pack.js"></script>
Should be
<script src="./src/index.pack.js"></script>
I'm trying to add dynamic meta-tags on every single page. But still can't see my meta-tags on my page source code. Do I need to put something in public/index.html... I'm not using server
I'm trying to add dynamic meta-tags on every single page. But still can't see my meta-tags on my page source code. Do I need to put something in public/index.html... I'm not using server
I'm trying to add dynamic meta-tags on every single page. But still can't see my meta-tags on my page source code. Do I need to put something in public/index.html... I'm not using server
Example:
Home page
import {Helmet} from 'react-helmet';
export default class Home extends Component {
render() {
return (
<div>
<head>
<Helmet>
<meta charSet="utf-8" />
<title>Home</title>
<link rel="canonical" href="https://example.com/" />
<meta name="description" content="Some description here" />
</Helmet>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--
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>Website</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`.
-->
</body>
</html>
You should use React-helmet for this as react-meta-tags is outdated.
As the documentation example shows:
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://example.com/example" />
</Helmet>
...
</div>
);
}
};
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