I am using html-webpack-plugin to generate my html page for entry file. I don't want to care where my page output. It may be difference from source file oganization.
src
a
a.html
b
b.html
a.html
to b
I'm not sure I understand the question. In addition to adding a reference of your bundle to the generated a.html, do you also want generated a.html to refer to b.html.
I would use a top html template which will include a reference to your bundle like index.html.
Then you could use the raw-loader to just copy over a.html and b.html:
{
test: /\.html$/,
loaders: ['raw-loader'],
exclude: path.join(__dirname, './index.html')
}
Related
TLDR; In a Javascript file for my Firefox extension, how can I load the contents of other files from inside my extension (such as an HTML view & CSS stylesheet) for use on the current web-page?
I'm working on my first Firefox extension, for personal use.
So I setup my manifest.json to load /script/panel.js when any page of the site loads.
In panel.js, I would like to do something like:
const html = MyExtension.getFileContent('/view/panel.html');
const node = document.createElement('div');
node.innerText = html;
document.body.appendChild(node);
But I can't find anything like MyExtension.getFileContent(). All I've been able to find is how to add sidebar (through manifest?) & browser action for the toolbar at the top of the browser & other non-programmatic ways of exposing files that are inside my extension.
Then in /view/panel.html, Ideally, I'd like to also reference /style/panel.css which is also found inside my extension's root directory, such as with a <link tag.
Did you set web_accessible_resources in your manifest.json? It is required to make resources in your extension readable from webpages.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources
I am trying to add a custom favicon to my NestJs documentation. However, I am a bit lost on how the path file gets resolved and not sure how to achieve this.
I am using nestjs/swagger module version 3.1.0 and trying to pass the path file like so when initializing the Swagger Module.
My main.ts file
SwaggerModule.setup('/v1/docs', app, document, {
customCss: CUSTOM_STYLE,
customSiteTitle: 'My API Documentation',
customfavIcon: './public/favicon.jpg'
});
Searched on the github issues and didn't find anything useful. And as you can see from the code I was able to modify the CSS styles, but I cannot figure out how to make the favicon custom.
Appreciate any help
I have added the custom favicon to my swagger docs using following:
The first thing you make sure is, in your main.ts, the app is initialized with the following:
const app: NestExpressApplication = await NestFactory.create(...)
To serve static content you must initialize your app with NestExpressApplication.
The next thing is to allow the Nest application to look for public content using the following in your main.ts after initialization:
app.useStaticAssets(join(__dirname, '..', 'public'));
Also, create a public directory in your root of the application and paste your favicon.jpg file in it.
Now its time to initialize the Swagger in main.ts
SwaggerModule.setup('/v1/docs', app, document, {
customCss: CUSTOM_STYLE,
customSiteTitle: 'My API Documentation',
customfavIcon: '../favicon.jpg'
});
You must give a relative path to the root of the application like ../favicon.jpg in case our main.ts is in src folder in root of the application.
Alternative solution, just host your favicon and reference it with external url
SwaggerModule.setup('api', app, getSwaggerDocument(app), {
...
customfavIcon:
'https://[your-bucket-url].com/.../anything.png',
});
To iterate on pravindot17's answer, now there's the #nestjs/serve-static package for hosting static files. Which avoid us from type-casting the Nest.js client and relying on our implicit assumption that we're running an Express-backed Nest.js server.
After installing the package, you hook it into your src/app.module.ts. This configuration expects that the root of your project has a /public/ folder where you store your static assets.
import { Module } from '#nestjs/common';
import { ServeStaticModule } from '#nestjs/serve-static';
import { join } from 'path';
#Module({
imports: [
// Host static files in ../public under the /static path.
ServeStaticModule.forRoot({
/**
* Config options are documented:
* https://github.com/nestjs/serve-static/blob/master/lib/interfaces/serve-static-options.interface.ts
*/
rootPath: join(__dirname, '..', '..', 'public'),
serveRoot: '/static',
}),
// ...
})
export class AppModule {}
Now my own preference is using an absolute path rather than relative, as it makes it independent from the path we picked to host our API documentation under.
SwaggerModule.setup('/v1/docs', app, document, {
customfavIcon: '/static/favicon.jpg'
});
One last note is that this configuration hosts static files from /static/*, this is done to prevent that API calls to non-existing endpoints show an error message to the end-user that the static file cannot be found.
Otherwise, all 404's on non-existing endpoints will look something like:
{"statusCode":404,"message":"ENOENT: no such file or directory, stat '/Users/me/my-project/public/index.html'"}
There are few assets generated via webpack. The assets themself are pretty regular, application.js, application.css, images and so on. The point is that at runtime that assets should be hosted inside a specific server-side assembly and because of this, all the urls should be changed in this manner:
dist/application.js ==> ?path=content.application.js
dist/application.css ==> ?path=content.application.css
...and so on for every style/script/image in the output bundle.
I tried the publicPath option of output section, but it looks like this functionality is not so powerful. So if I do this:
output: {
// ...
publicPath: "?path=content."
},
When the result for root html is like this:
<script type="text/javascript" src="?path=content./application.js">/script>
<link href="?path=content./application.css" rel="stylesheet"></head>
Which is not correct as it has additional / that I cannot get rid of.
It would be great if publicPath was a function that returns dynamic path for every resource:
output: {
// ...
publicPath: function(originalFile){
return /* generate publicPath dynamically */
}
},
...but it's not the case with webpack2. So is there any method to globally replace public urls for all the resources? Or maybe some loader that does this.
Assume I have two files
AFile.ts
/// <reference path="ZFile.ts" />
new Z().Foo();
ZFile.ts
class Z
{
Foo() { }
}
Is there a way to generate all scripts in a single js file in the order it requires (need ZFile before AFile to get the definition of Z)?
In post build events I added a call to TypeScript compiler
tsc "..\Content\Scripts\Start.ts" --out "..\Content\Scripts\all.js"
In the bundle configuration I added
bundles.Add(new ScriptBundle("~/scripts/all").Include("~/Content/Scripts/all.js"));
On the _Layout.cshtml file I added
#Scripts.Render("~/Scripts/all")
And with that I got
<script src="/Scripts/all?v=vsTcwLvB3b7F7Kv9GO8..."></script>
Which is all my script in a single file.
The compiler does not minify, you have to use bundles and compile on Release or set
BundleTable.EnableOptimizations = true;
You can also minify using Web Essentials or grabbing the contents and minifing somewhere else.
Now VS Typescript Extension supports merging to one file.
Make sure that you have installed the extension Tools -> Extensions and Updates (VS2015 has it by default)
Go to the project properties and check Combine JavaScript output into file:
Important to have /// <reference /> (as in question), it helps tsc order files by dependencies before the merge.
Then for minimisation bundle can be used as usual:
bundles.Add(new ScriptBundle("~/bundles/finale").Include("~/js/all.js"));
and in view
#Scripts.Render("~/bundles/finale")
Use the --out parameter.
tsc AFile.ts ZFile.ts --out single.js
The typescript compiler will do the dependency navigation for you automatically.
Assuming all of your ts files are directly or indirectly under a folder called say 'ts' you could write a tt script which merged all of .js files(but not min.js) into a file myApp.js and all of your min.js files into myApp.min.js.
To obtain the ordering of files you could process subfolders thus:
string[] FolderOrder =
{
#"libs\utils\",
#"libs\controls\",
#"app\models",
#"app\viewmodels",
#".",
};
I'm starting in web2py and I need to link my static files in my view files.
I'm trying to use URL() helper to make the links but I doesn't work properly...
My application is called red, my controller default and my function index.
My view is called index.html and is inside default folder, when I go to the page I see the view correctly but my URL are all wrong...
So far I tryed:
URL('static', 'css/bootstrap.min.css')
which gave back: "/static/css/bootstartp.css"
URL(a=request.application, args='static/css/bootstrap.css')
which gave: "/default/red/static/css/bootstrap.min.css"
URL(r=request, arg='static/css/bootstrap.min.css')
which gave: "/index/static/css/bootstrap.min.css"
URL('static/css/bootstrap.min.css')
which gave: "/default/static/css/bootstrap.min.css"
URL(a=request.application, c='static/css/bootstrap.min.css', f='')
which gave: "/red/red/static/css/bootstrap.min.css"
I may have tried some more but with no success...
My index function only returns dict().
And my router:
routers = dict(
# base router
BASE = dict(
applications = ['red', 'admin'],
default_application = 'red',
default_controller = 'default',
default_function = 'index',
map_static = True
)
)
I think it's also important to say I'm testing it on google app engine.
I want to get "/red/static/css/bootstrap.min.css".
I hope you want to link the css files in your view.
You can do this is tow ways.
1.In controller file (inside index():)
response.files.append(URL(request.application,'static/css','bootstrap.min.css'))
the same command you can use in view (index.html) also:
{{response.files.append(URL(request.application,'static/css','bootstrap.min.css'))}}
2.in the view (index.html) you can mention the normal css linking.
<LINK rel="stylesheet" type="text/css" href="{{=URL('static/css','bootstrap.min.css')}}">
if you want to link this file for the entire application. Then mention the above line in the layout.html page.
To get "/red/static/css/bootstrap.min.css":
URL('red/static', 'css/bootstrap.min.css')
I found the solution.
URL('static', 'css/bootstrap.min.css')
This line is correct, however I needed to turn map_static off in the routers file.