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
Related
But the npm run dev server shows the default counter app that is built. But when i build plain html css javascript with npm run build in dist folder. then run the index.html by clicking it, it shows blank page. Event though the index.html has this content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Svelte</title>
<script type="module" crossorigin src="/assets/index-98081fa1.js"></script>
<link rel="stylesheet" href="/assets/index-65be3931.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
But npm run dev server has the counter app that you get if you initialize with npm init vite
then
$ npm install
$ npm run dev
this is in svelte not sveltekit.
You can't "run" an HTML file by clicking it.
If you do not have it served by an actual HTTP server, the scripts/other assets will not be allowed to load. The command vite preview should do just that. (Maybe this is already defined as a script in your package.json, then you could execute npm run preview.)
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 new to Angular and recently I started working on a simple personal SPA project. It was created using the angular cli, and the folder structure is nothing special:
- myApp
----e2e
----node_modules
----src
--------app
------------ main app module with two .ts components and html for each of them
...
Everything works fine when I use ng serve: I can see my components on localhost:4200 and Angular's functionality works as a charm.
However, when I run ng build and from inside the newly created dist folder I open index.html, I can't see my components at all.
The index.html file is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RoutingDemo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>
I get no errors in the console for missing files and all of the JS and CSS files are being successfully read by the index.html.
Can someone explain why am I not seeing the components?
So you need to serve your page, easiest way is to do npm i -g http-server and the run http-server from command lint in your dist folder, then you will be able to see your page
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.
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