Aurelia and Webpack, Common Chunks and SPA Config-Generate-Index-Html Setup - javascript

I have a common chunks question. I am currently using https://www.npmjs.com/package/html-webpack-plugin along with the common chunks but currently in my HTML without adding anything, app.css is loaded automatically. How can I prevent the autoloading of that resource? Also, my other bundle, about.css is also automatically being injected into the HTML. This happens before I even use an import or require statement.
I can restrict which chunks get loaded via
require('#easy-webpack/config-generate-index-html')
({minify: false, overrideOptions:{
chunks: ['app',
'aurelia-bootstrap',
'aurelia',
'common']
}}),
My goal is to be able to load only the page specific styles and the page specific JS and then when the user navigates to another page, dynamically import the required resources.
Without adding anything, app.css is loaded automatically. How can I prevent the autoloading of that resource? Also, my other bundle, about.css is also automatically being injected into the HTML. This happens before I even use an import or require statement.
For example:
<link href="common.css" rel="stylesheet">
<link href="about.css" rel="stylesheet">
<link href="app.css rel="stylesheet">

Related

Laravel edit page does not call CSS and JS when on a server

I made an edit page for my application which is accessible via the index. I have a master.blade.php file that contains all the references for scripting and the CSS links. and every page calls this master page to make use of the Nav bar, heading and the CSS/JS. The edit page does not seem to call this and on the console it shows 404 not found for these CSS and JS files when I pushed this project on a server. Does anyone know what I am doing wrong
I have changed the routing of the CSS/JS files to route correctly and that calls correctly everywhere else but this page.
Here is a sample of my paths:
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
this is in my master page, so in my other pages I call:
#extends('layouts.master')
In Laravel, best way to import any asset, is using asset function in your blade file:
asset('path to css')
This is work for images, CSS and JS files, and other files to import into a blade or HTML.
just upload your files into "public" folder like this folders scaffolding:
---- public
---- ---- css
---- ---- ---- bootstrap.min.css
and use asset function like this:
<link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet" />
I hope this response being useful for you!
use asset function like this
<link href="{{asset('path')}}" rel="stylesheet" />

Cache misses for lazy loaded resources (using dynamic imports)

In a Vue.js project created with Vue CLI (internally using webpack), I implement code splitting and lazy loading with dynamic imports like so:
import(/* webpackChunkName: "my-feature" */ "./my-feature.js");
As a result I get the expected set of files:
dist/myApp.umd.min.js
dist/myApp.umd.min.vendors~my-feature.js (my-feature dependencies)
dist/myApp.umd.min.my-feature.js
The Vue application is built as a library and then used for an existing web site. What I do is include myApp.umd.min.js in <head> (common to all pages), and then in <body> request code I need for that page (for example myApp.umd.min.my-feature.js). Dependencies (myApp.umd.min.vendors~my-feature.js) are automatically requested by the earlier script.
Problem
When I navigate to a page, that uses the Vue app (and specifically my-feature), all 3 of the above files are loaded. That is expected for the first visit, but if I move to a different page and then return, only the first file (myApp.umd.min.js) is loaded from cache. The other ones are loaded from server every time I visit the page.
What approach to take for the lazy-loaded scripts to come from cache once already loaded? Thank you!
So far I have not found anything better than including all the scripts, I need on the page, in its <head> section. Moreover only using <script> tag helped; <link href="..." rel="preload" as="script"> was useless.
Use a version parameter for the script url.
There's a code snippet that showcase this:
<script type="text/javascript" src="myApp.umd.min.js?v=123"></script>
Also this is a valid solution:
<link rel="preload" href="myFont.woff2" as="font"
type="font/woff2" crossorigin="anonymous">
From docs:
A rel value of preload indicates that the browser should preload this resource with the as attribute indicating the specific class of content being fetched. The crossorigin attribute indicates whether the resource should be fetched with a CORS request.

How to use CSS and JS resources in a routed page in Odoo?

I’m using Odoo controller to create a web page and make it public to customer so he doesn’t need to login.
In this page I’m trying to use CSS and JS libraries which exists in files inside the module (static folder).
The problem is that the page can’t reach these resources because it searches for them in the domain of the URL not in the filesystem (ex. http://localhost:8069/mywebpage)
I tried to inherit the template and the qweb design and inject the files but I got the same problem.
<template inherit_id="..."> <xpath expr="." position="inside"> <link rel="stylesheet" href="...">
The only solution I have found is copy/paste the source code of the JS libraries and CSS inside the template which is not a practical solution.
How can I make the routed page access the CSS and JS resources inside Odoo module?
Just put the module path of your assets resources, like:
<link rel="stylesheet" href="/your_custom_module/static/src/css/file.css">
And be sure the file will be there, the same for js script definition.
Also you should include in your posts the exact info and value that you are using, not .... It doesn't help you into get a response using ..., it just makes things difficult.

Build React app as modular JS library

Background
I have a React app that was generated with create-react-app.
It is a set of UI forms that are intended to be presented modally inside a hosting website. The hosting website provides a JS callback to be invoked upon completion.
Motivation
I want to be able to distribute this small React app as a standalone "vanilla" JS module, that can then embedded in any HTML page.
What I have now is running npm run build and getting a full website with my app - but that's not what I need. A desirable output should be a simple .js file, that can be imported to a other's websites (that are not necessarily built with React). Braintree's JS SDK is a very good example of what I need.
Example usage in hosting website
<head>
<!-- loading MyModule -->
<script src='https://cdn.mydomain.com/mymodule.js' some-parameter='param-provided-by-hosting-website'></script>
</head>
<body>
<div id="mymodule-container"></div>
<!-- rest of hosting website... -->
<script>
// this will present a "full screen" UI component and call callback upon completion
MyModule.presentUI(
function callback() {
console.log('MyModule completed');
}
);
</script>
</body>
Putting aside all of the internal structure and consideration, how do I bundle my React app (including its .css files) as one .js file that runs inside another website?
UPDATE
So apparently running npm run build outputs, among other things, a static/main*****.js file, which is all of the JS contents. The index.html file is actually a good example of how to use that .js file as a module:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<title>My Hosting App</title>
<link href="/static/css/main.1695e3be.css" rel="stylesheet">
</head>
<body>
<div id="my-module-container"></div><script type="text/javascript" src="/static/js/main.0b4c7736.js"></script>
</body></html>
Now what's left to ask is how to load the .css (from built-generated static/main******.css file with the .js file, without making the hosting website also add a <link> tag to the RSS (like in the output index.html. Basically making this happen inside the generated .js file.
I cannot say how this can be achieved without having some sort of 'standard' API, that all your modules can follow.
We have tried to do something similar with FrintJS (https://frint.js.org), with the concept of 'regions'.
You define certain areas where you want your Apps (modules according to your question) to mount themselves on, and they can be loaded asynchronously on demand via separate <script> tags.
You can read more here:
https://frint.js.org/guides/regions/
https://frint.js.org/guides/code-splitting/

ASP.NET Web Forms Routing and paths to js files

I am working on an ASP.NET Web Forms project that make use of Routing.
I have two routing situations:
http://mywebsite.com/section
http://mywebsite.com/section/subsection
My js files are stored in a /js folder in the root of the project.
Fact is, when I load /section page everything works fine, the js are loaded correctly. When I load /section/subsection page the js are not loaded and actually the path appear to be something like
http://www.mywebsite.com/section/file.js
I have already tried to put a slash before the name of the js folder or even to use a server side ResolveUrl function like
<script src='<%=ResolveUrl("~/js/file.js")%>'></script>
In this case file.js il loaded correctly; anyway if file.js contains calls to an external js file, the latter is not loaded (its path is always in the form of /section/externalfile.js).
Adding the following line to the Global.asax
routes.Ignore("{*allfiles}", new { allfiles = #".*\.(css|js|gif|jpg|png)" });
did not solve the problem either.
The most surprising thing is the fact that, for instance, image or CSS files are loaded correctly even with a normal link like the following:
<link rel="stylesheet" type="text/css" href="css/owl.theme.css" media="all" />
Is there anyone who has an idea of how solving this issue ?
Edit: The master page of my project calls a cutom.js file (which is loaded correctly). This file contains for instance the following call to superfish.min.js:
Modernizr.load([{
load: kopa_variable.url.template_directory_uri + 'js/superfish.min.js',
complete: function() {
$('.top-menu').superfish({});
}
}]);

Categories

Resources