When the website is deployed to QA or Prod, the bundles/app.css and admin.css are blank. They will load if I refresh the screen. Fiddler gives a http 500 for admin.css, app.css, modernizr,jquery.
The order of errors make me thing it is something in the AddWebOptimizer pipeline.
_Layout.cshtml
<link rel="stylesheet" href="~/css/bundles/app.css" />
<link rel="stylesheet" href="~/css/bundles/admin.css" />
<script src="~/js/bundles/modernizr.js"></script>
Program.cs
builder.Services.AddWebOptimizer(pipeline =>
{
pipeline.AddJavaScriptBundle("/js/bundles/datetimepicker.js", "/js/moment.min.js", "/js/bootstrap-datetimepicker.min.js");
pipeline.AddJavaScriptBundle("/js/bundles/dataTables.js",
"/js/moment.min.js",
"/js/DataTables/jquery.dataTables.min.js",
"/js/DataTables/dataTables.buttons.min.js",
"/js/DataTables/jszip.min.js",
"/js/DataTables/buttons.html5.min.js",
"/js/DataTables/dataTables.bootstrap.min.js",
"/js/DataTables/datetime-moment.js",
"/js/DataTables/dataTables.select.min.js");
pipeline.AddJavaScriptBundle("/js/bundles/modernizr.js", "/js/modernizr-2.8.3.js");
pipeline.AddJavaScriptBundle("/js/bundles/jqueryval.js", "/js/jquery.validate*");
pipeline.AddJavaScriptBundle("/js/bundles/bootstrap.js", "/js/bootstrap.min.js", "/js/respond.js");
pipeline.AddJavaScriptBundle("/js/bundles/admin.js", "/js/AdminLTE/adminlte.js", "/js/bootbox.min.js");
pipeline.AddCssBundle("/css/bundles/app.css", "/css/bootstrap.min.css", "/css/bootstrap4-classes.css", "/css/font-awesome.min.css", "/css/Site.css");
pipeline.AddCssBundle("/css/bundles/admin.css", "/css/AdminLTE.css", "/css/skins/skin-blue.css");
pipeline.AddCssBundle("/css/bundles/dt.css", "/datatables/css/dataTables.bootstrap.min.css", "/datatables/css/buttons.dataTables.min.css");
pipeline.AddCssBundle("/css/bundles/datetimepicker.css", "/css/bootstrap-datetimepicker.min.css");
});
Related
I'm trying to generating a pdf file which is generated from express-handlebars rendering. However, some css files don't seem to be working.
Bootstrap are still working okays, but the custom css (i'm using a theme) is not working. I have tried phantomjs config (--web-security=false,...), switching css folder directory from local to the server. But none of them seems to be working. Images are working fine.
generating html and creating pdf files
var config = {
format: "A4",
orientation: "landscape",
base: "http://127.0.0.1:3002/uploads/theme/",
timeout: 100000,
phantomArgs: ["--web-security=false","--local-to-remote-url-access=true"]
}
var html = await hbs.render('./views/pdf.handlebars', data)
await fs.writeFile("pdf.html", html, function(err) {
if(err) {
return console.log(err);
}
})
var fileName = uuid.v4()
await pdf.create(html, config).toFile(`./downloads/${fileName}.pdf`, function (err, res) {
if (err) return console.log(err);
response.send({ success: true, data: { downloadURL: fileName } })
including css files:
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
server receiving calls from css files:
Imgur
Expecting results:
Imgur
Actual result:
Imgur
As you can see, bootstrap and font-awesome are working fine, but the "style.css" is not working. Anyone have any idea about this problems? Many thanks in advance!
Your server code is reading only HTML files and not css files , so css is actually being not used, use inline css.
I am also looking for methods to write separate HTML and CSS and merge to form pdf.
I'm preparing a starter for react from scratch, here is the code: https://github.com/antondc/react-starter
I managed to set up bundling for client and server, with css modules and less, and now I'm with server side rendering. I'm doing that with a js template:
// src/server/views/index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INDEX.EJS</title>
<link rel="stylesheet" type="text/css" href="assets/index.css">
</head>
<body>
<div id="app"></div>
<script src="/assets/bundle.js"></script>
</body>
</html>
As you see, the link to the css file is harcoded there. But in my Webpack configuration I have this file name hashed, because I want to prevent caching from browsers when I update the code on development.
I am wondering how can I link the css file there. Now in the template I have href="assets/index.css, but the css file is in /dist/assets/d47e.css.
It would be great if would be possible to do something like href="assets/*.css, but is not possible, so what is the common approach for a problem like this one?
Thanks!
It depends.
Step 1: Get the current asset name
To get the current name of the generated webpack css/js files, you can use the assets-webpack-plugin. This will (with default config) generate an assets.json file in your output folder with essentially this structure:
{
"bundle_name": {
"asset_kind": "/public/path/to/asset"
}
}
Step 2a: Your html is rendered from a template (pug/jade/what ever)
// in your render code
const assets = require('<webpack-output-folder>/assets.json');
// ...
res.render('template', {
scripts: [{src: `${WEBPACK_PUBLIC_PATH}/${assets.myEntryPointName.js}` }],
links: [{href: `${WEBPACK_PUBLIC_PATH}/${assets.myEntryPointName.css}` rel: 'stylesheet' }],
});
// in your template (example for pug)
// ...
each link in links
link(rel=link.rel href=link.href)
// ...
each script in scripts
script(src=script.src)
// ...
Step 2b: Your html is static
You need to update the html (using a script) with the information from the asset.json file. This script needs to be run after webpack. Something like
const assets = require('<webpack-output-folder>/assets.json');
const fs = require('fs');
const css = /assets\/[a-z0-9]*\.css/i;
const js = /assets\/[a-z0-9]*\.js/i;
fs.readFile('<yourhtml>.html', (err, data) => {
// ... (error handling)
const updatedCss = data.replace(css, assets.myEntryPointName.css);
const updatedJs = updatedCss.replace(js, assets.myEntryPointName.js);
fs.writeFile('<yourhtml>.html', updated, (err) => {
// ... (error handling)
});
});
You can use HTMLWebpackPlugin to generate an HTML file that will have your JS and CSS output inserted.
my dir looks like that :
|-project
-gulpfile.js
|-build
-index.html
|-js
-app.min.js
-vendors.min.js
|-styles
-all.css
-vendors.min.css
i inject the css and js files with this gulp task:
gulp.task('index',function () {
return gulp.src('src/index.html')
.pipe(inject(gulp.src(['**/vendors.min.css','**/vendors.min.js','**/app.min.js','**/all.css'], {read: false})))
.pipe(gulp.dest('build'))
.pipe(livereload());
})
i set up a local server with node.js,when i do the request , the html file loads up,but the .js and .css files dont connect for some reason.Although when i check page's source code at output their paths are written in.
<!-- inject:css -->
<link rel="stylesheet" href="/build/styles/vendors.min.css">
<link rel="stylesheet" href="/build/styles/all.css">
<!-- endinject -->
when i hover on one of them it shows :
http://localhost:5000/build/styles/all.css
i use this task for setting the server :
gulp.task('connect', function() {
connect.server({
root: 'build',
livereload: true,
port: 5000
});
});
EDIT
any recommendation about how to make it on hovering look like
localhost:5000/styles/all.css
If the build folder is the root of the server, you shouldn't be including it in the path of the js and css files. This is failing because you are trying to reference a build folder inside the build folder.
Change your injection of css to the following:
<link rel="stylesheet" href="styles/vendors.min.css">
<link rel="stylesheet" href="styles/all.css">
I am getting the error: "Uncaught referenceError: App is not defined" in my JS console when loading this Enyo app on my localhost. I am brand new to Enyo so I am still trying to learn the concepts of kinds and components.
app.js (in source folder):
enyo.kind({
name: "App",
kind: "FittableRows",
classes: "enyo-fit enyo-unselectable",
components: [
{
kind: "onyx.Toolbar",
layoutKind:"FittableColumnsLayout",
components: [
{
kind:onyx.Button,
style:"width:80px;background:green;",
ontap:"handleBtnBack",
content:"Back"
},
{
content:"Header",
style:"text-align:center;",
fit:true
},
{
kind:onyx.Button,
style:"width:80px;background:red;",
ontap:"handleBtnNext",
content:"Next"
}
]
},
{
kind: "Scroller",
horizontal:"hidden",
touch:true,
fit:true,
thumb:true,
components:[
{
tag:"h1",
//This is how we insert css class.
classes:"padding15px",
content:"This is content area...Hello World!!!"
}
]
},
{
kind: "onyx.Toolbar",
// The footer
layoutKind:"FittableColumnsLayout",
components:[
{
kind:"onyx.Button",
content:"Go Next Page",
ontap:"handleBtnNextPage",
fit:true
}
]
}
],
create: function(){
this.inherited(arguments);
console.log("App is created in memory");
},
rendered : function(){
this.inherited(arguments);
console.log("App is created in rendered into DOM");
},
handleBtnNextPage : function(inSender,inEvent){
new Page2().renderInto(document.body);
},
handleBtnNext: function(inSender,inEvent){
new Page2().renderInto(document.body);
},
handleBtnBack: function(inSender,inEvent){
//For each enyo event handler comes with inSender, the control that sends the event and the inEvent the actual event itself.
alert("Back Button");
}
});
package.js (in source folder):
enyo.depends(
// Layout library
"$lib/layout",
// Onyx UI library
"$lib/onyx", // To theme Onyx using Theme.less, change this line to $lib/onyx/source,
//"Theme.less", // uncomment this line, and follow the steps described in Theme.less
// CSS/LESS style files
"../assets/css/app.css",
// Include our default entry point
"App.js",
"Page2.js"
);
index.html (in root folder):
<!--My Copy-->
<!DOCTYPE html>
<html>
<head>
<title>IsGoodStuff.com Tutorial #2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="assets/favicon.ico"/>
<script src="enyo/enyo.js" type="text/javascript"></script>
<!-- -->
<script src="package.js" type="text/javascript"> </script>
</head>
<body>
<script type="text/javascript">
new App().renderInto(document.body);
</script>
</body>
</html>
If your index.html is in your root folder, but the main package.js is in the source folder, it's probably your script tag that loads package.js. Try:
<script src="source/package.js" type="text/javascript"> </script>
You haven't supplied Page2 but it appears the code would work as-is.
Here's a fiddle showing the working page: http://jsfiddle.net/kgxvg7Lw/1/
Some thoughts:
1) Are you using a case-sensitive file system? You show app.js but your package.js has App.js (capitalized).
2) Are you certain there are no parse errors in the console?
Now, that said... You probably don't want to reload a new app for every 'page' switch. Usually, you would use something like Panels to allow the app to control the content that appears on the screen and just navigate among the panels as needed.
I'm writting a application by Node.js,express.js,ejs....
I'm using this code to use ejs and load css:
app.engine('.html', require('ejs').__express);
app.set('views', __dirname + '/views');
app.set('view engine', 'html');
app.use(express.static(__dirname + '/views'));
This is my dir struct
myapp
--Controller
----admin.js
--db
----db.js
--views
----admin
------user.html
------addUser.html
----css
------style.css
--app.js
Html load css like this
<link href="../css/style.css" rel="stylesheet">
And i had used css for my web. when i use params :
app.get('/admin/users', admin.users);
app.get('/admin/add', admin.add);
url are:
loocalhost:1080/admin/users
loocalhost:1080/admin/add
then my css active. but when i use param:
app.get('/admin/users/add', admin.add);
url is:
loocalhost:1080/admin/users/add
then my css not active.
so how to fix it??
Please help.
Avoid making your CSS links relative. So specify them like so:
<link href="/css/style.css" rel="stylesheet">