I have a oldish Vaadin 14 Wildfly CDI app that has been continuously updated to the latest version of Vaadin, now at 14.9.2. At some unknown past update, certain javascript script files are now being fetched as unknown routes instead of the actual source file. Only certain directories are now useable for .js files and even subdirectories of those end up as routes.
I also have an Vaadin embedded application as per https://vaadin.com/docs/v14/flow/integrations/embedding/tutorial-webcomponent-exporter
and now even this apps .js files are attempted to be loaded as routes. For example the files
/vaadin/VAADIN/build/webcomponentsjs/webcomponents-loader.js fetch as routes.
Here is how the servlet is configured:
#WebServlet(urlPatterns = "/*",
name = "myapp",
asyncSupported = true,
initParams = {
#WebInitParam(name = "closeIdleSessions", value = "false")
})
public class ApplicationServlet extends CdiVaadinServlet implements SessionInitListener, SessionDestroyListener, UIInitListener {
...
}
I have no idea where to start looking for this problem. It fails on a local development machine so no firewalls, reverse proxies etc etc are interfering with the urls.
Any ideas of where to start on this problem would be appreciated. Were there any code changes I had to make for some update?
Related
I have a Blazor Server 6.0 app where I have links to download .msg files.
I have setup IIS to serve that mime-type trying both application/octet-stream and application/vnd.ms-outlook (and restarting IIS)
I have also tried to put in web.config the staticcontent tag like suggested here:
.msg file gives download error
And obviously in my program.cs I have app.UseStaticFiles();
I try to put the .msg in a non-blazor app and they work ok, so I think is not IIS related
So why I cannot download (or open automatically in outlook) this type of file, while other (docx, pdf, zip, etc.) are Ok ?
ASP.NET Core -- on the server side -- also needs to know about the files it has to serve. You can enable serving all unknown file types (I'd rather not include the relevant code as it is a major security risk), or you can add you own additional mappings like so:
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".msg"] = "application/vnd.ms-outlook";
// app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions()
{
ContentTypeProvider = provider
});
More info in the official docs: https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-7.0#fileextensioncontenttypeprovider
Additionally, Blazor Server registers custom options for serving static files (like .server.js, which is different from just .js). It's not directly exposed as a public API to configure, but you can look at the source here as to what the AddServerSideBlazor extension method actually does. The solution there relies on you calling UseStaticFiles without explicitly specifying the options, so that it can retrieve the StaticFilesOptions instance from DI.
Armed with this knowledge, you can override an already configured options instance as follows:
builder.Services.PostConfigure<StaticFileOptions>(o =>
{
((FileExtensionContentTypeProvider)o.ContentTypeProvider).Mappings[".msg"] = "application/vnd.ms-outlook";
});
This configures the already initialized options instance registered in the DI (after all other configurations happened on it, thus PostConfigure).
Note that if you would for whatever reason decide to use a different IContentTypeProvider, the unsafe cast above would need to be revised as well.
I have a few components and I want to deploy them into S3 and make them reachable with CloudFront.
My problem is that I don't know what file(s) I need to upload to S3 and which file needs CloudFront needs to point to as entry point.
Here's my stencil.config.tsx:
import { Config } from '#stencil/core';
export const config: Config = {
namespace: 'stencil-test',
taskQueue: 'async',
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader',
dir: './build/dist'
},
{
type: 'www',
serviceWorker: null // disable service workers
}
]
};
I tried executing npm run build that generated a couple of folders: build/loader and build/dist there's a lot of stuff within each folder but I have no idea how which folder and files are supposed to do what.
It was hoping the build command would generate a minified file that contained all the stuff needed (is this how it works?) so I could eventually do something like the following where I want to use my components:
<script type="module" src='https://cdn.jsdelivr.net/npm/my-name#0.0.1/dist/myname.js'></script>
Can anyone offer some guidance or point me towards any resources?
The www output target is meant for generating apps and not really relevant for component libraries. To host your components, you should upload the whole generated dist folder. Only the files that the client needs are downloaded, which depends on the client and which components they access (lazy-loading). So you don't need to worry about the amount of files. See https://stenciljs.com/docs/distribution.
To start, Stencil was designed to lazy-load itself only when the component was actually used on a page. There are many benefits to this approach, such as simply adding a script tag to any page and the entire library is available for use, yet only the components actually used are downloaded.
If you want to generate a single bundle containing all your components, there's an output target called dist-custom-elements-bundle. For the differences to dist you can have a look at the same docs link above.
One of the main differences is that loading the script doesn't automatically register the components for you, you'll have to either do it manually per component (using customElements.define(), or define them all using the defineCustomElements() export. The official documentation for that output target is https://stenciljs.com/docs/custom-elements.
I'm fairly new to web development and I was wondering if there was a way to route a static web page with its own stylesheets and javascripts, using vue-router.
Let's say I have a directory called staticWebPage that contains:
an index.html file
a javascripts directory containing .js files
and a stylesheets directory containing .css files
Now, I'd like to map /mystaticwebpage to this index.html file so it displays that particular static web page.
I'd like to do something like this:
import VueRouter from 'vue-router'
import AComponent from './components/AComponent.vue'
import MyHtmlFile from './references/index.html'
router.map({
'/acomponent': {
component: AComponent
},
'mystaticwebpage': {
component: MyHtmlFile
}
})
Of course, this doesn't work as I can only reference Vue components in router.map.
Is there a way to route to that ./staticWebPage/index.html file using all the .js and .css file contained in the /staticWebPage directory?
So for your case you can do something that uses Webpack’s code-splitting feature.
More precisely, what you want is probably async components. So the code (and the css) used in the component definition (including any script you included there) will be loaded only when the corresponding page is accessed.
In large applications, we may need to divide the app into smaller
chunks and only load a component from the server when it’s actually
needed. To make that easier, Vue allows you to define your component
as a factory function that asynchronously resolves your component
definition. Vue will only trigger the factory function when the
component actually needs to be rendered and will cache the result for
future re-renders.
It can be a bit challenging to setup, so please refer to the dedicated guide in the VueJS doc.
We have developed an application using Extjs 4.2 following MVC pattern. We have project folder setup as follwing:
WebContent
--> app
-->controller
-->model
-->store
-->view
app.html
app.js
In app.js we have defined all models, controllers, stores under Ext.application. Like:
Ext.application({
name: 'MyProject',
autoCreateViewport: true,
models: [
'Model1',
'Model2'
],
stores: [
'store1',
'store2'
]
(views and controllers similarly)
This all works good for us. Now we need to concatenate all these models, stores, controllers, views into one app-all.js and use it in our app.html. I have read many posts on net on how to do that with Sencha cmd tool, but none of them was application to me as we have a restriction to install cmd tool and we need to generate concatenated and minified file on build time with Maven.
I found out a solution that by using JSBuilder2, I can get a concatenated + minified app.js.
Problem is now when I use this minified file, all individual js files are still being downloaded. As if I delete individual js files, I get 404 error and application fails to load.
I suppose that is because of way we have defined models, views, controllers in our app.js; they are still looking for js class files in respective folders.
Please share if you have any solution to this.
You can disable the dynamic loader using the enabled property of Ext.Loader (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.Loader-cfg-enabled):
Ext.Loader.setConfig({ enabled: false })
You must place this code after including the framework files, but before your application files.
This should prevent Ext JS from trying to download files. You need to make sure all framework and application classes that you use are included on the page.
I have a fresh grails 2.1.1 installation, windows 7.
Problem: Static resources (CSS) don't reload in development mode.
According to http://grails.1312388.n4.nabble.com/Re-Grails-2-0-CSS-Changes-not-Picked-Up-td3680479.html I've tried in Config.groovy:
environments {
development {
grails.resources.processing.enabled = false;
}
}
Result: no CSS is loaded at all. Chrome needs 30 seconds to load a page, and does not load any CSS.
I reverted that change.
Then, according to http://grails.1312388.n4.nabble.com/disabling-static-resource-stuff-td3827384.html
I've tried to uncomment the plugins runtime ":resources:1.1.6"
Now I'm back to how it was initially, CSS files are served but not reloaded.
What works temporarily is the hack mentioned here:
http://grails.1312388.n4.nabble.com/The-resources-plugin-is-not-reloading-my-CSS-and-JS-of-a-bundle-td3857137.html
Top append to the url: ?_debugResources=y
How do I make static resources being reloaded in development mode? Shouldn't that be the default anyway? It doesn't make any sense in my opinion to reload gsp's (which it does) but not the static resources.
I set the grails.resources.debug flag in Config.groovy on debug to get the URL to be appended like this
css/main.css?_debugResources=y&n=1386063248351
environments {
development {
grails.resources.debug = true
}
production {
}
}
Any URL in your application can have the query parameter _debugResources=y added to it, and the request will perform no processing. So for example if you are browsing http://localhost:8080/myapp/admin and need to bypass resources, just change the URL in your browser to http://localhost:8080/myapp/admin?_debugResources=y
Reference Link : https://grails-plugins.github.io/grails-resources/guide/8.%20Debugging.html