I'm seeing different output from my production clone site than on production. The most obvious difference I can see so far (and there is probably more) is that the js/css references in the main document look to have been min-ified on production:
<link rel="stylesheet" type="text/css" href="https://www.example.com/media/css_secure/eb0df35e22a81d2150af7faddb2a014c-v2.18.css" media="all" />
<script type="text/javascript" src="https://www.example.com/media/js/f081fea0e1f96e90201edfc964382601-v2.18.js"></script>
But in my production clone, they come back like this:
<link rel="stylesheet" type="text/css" href="/git/magento/skin/frontend/responsive/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="/git/magento/skin/frontend/base/default/css/widgets.css" media="all" />
<link rel="stylesheet" type="text/css" href="/git/magento/skin/frontend/base/default/css/amasty/amfpc/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="/git/magento/skin/frontend/responsive/default/css/AutoComplete.css" media="all" />
...
<script type="text/javascript" src="/git/magento/js/prototype/prototype.min.js"></script>
<script type="text/javascript" src="/git/magento/js/lib/ccard.min.js"></script>
<script type="text/javascript" src="/git/magento/js/prototype/validation.min.js"></script>
<script type="text/javascript" src="/git/magento/js/scriptaculous/builder.min.js"></script>
...
There are 2 problems I see:
I would like my clone to have the same min-ified CSS and JS as prod
The CSS and JS urls for the clone start with "/git/magento" which is actually the name of my Magento ROOT folder on disk, so that's not right and they all come back as 404s.
When I did the production clone, I didn't bring over any of the files in /media (that's the advice I got). Is there anything I should be doing differently? I also followed these steps: https://magento.stackexchange.com/questions/35087/how-can-we-stop-a-magento-site-clone-from-redirecting-back-to-live-site
Why is the same code returning different CSS and JS references?
Found the issue. I had to create the MAGENTO_ROOT/var and MAGENTO_ROOT/media folders and give them the correct permissions. This was very helpful: http://devdocs.magento.com/guides/m1x/install/installer-privileges_after.html#privs-after
I guess the problem was that the /media folder was not writable to the web server process, so it couldn't save the minified/cached version of the js/css.
Related
<a class="active" href="/dashboard">
<i class="fa fa-dashboard">
</i><span>Dashboard</span>
</a>
router.get('/dashboard',function(req,res,next){
res.render('dashboard');
});
With this part above, the "dashboard.ejs" file gets rendered as expected but when I modify it as shown below, the "dashboard.ejs" file does not get rendered!
<a class="active" href="/dashboard/dashboardcontent">
<i class="fa fa-dashboard">
</i><span>Dashboard</span>
</a>
router.get('/dashboard/dashboardcontent',function(req,res,next){
res.render('dashboard');
});
and i'm wondering why it is failing to render the file when such small changes are made.
Any help ?
Before finding the solution:
app.use(express.static(path.join(__dirname, 'public')));
As we can see, I had no virtual path prefix created for files that are served by the express.static function !
The solution:
To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static function, specify a mount path for the static directory, as shown below:
app.use('/static', express.static(path.join(__dirname, 'public')));
I have also added this '/static' to all CSS, JS, Images links in "layout.ejs" file as shown below:
<!-- Bootstrap core CSS -->
<link href="/static/stylesheets/bootstrap.css" rel="stylesheet">
<!--external css-->
<link href="/static/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/static/stylesheets/zabuto_calendar.css">
<link rel="stylesheet" type="text/css" href="/static/javascripts/gritter/css/jquery.gritter.css" />
<link rel="stylesheet" type="text/css" href="/static/lineicons/style.css">
<!-- Custom styles for this template -->
<link href="/static/stylesheets/style.css" rel="stylesheet">
<link href="/static/stylesheets/style-responsive.css" rel="stylesheet">
<script src="/static/lib/jquery.min.js" type="text/javascript"></script>
<script src="/static/dist/jquery.validate.min.js" type="text/javascript"></script>
<script src="/static/javascripts/chart-master/Chart.js"></script>
<script src="/static/select2Plugin/select2.min.js"></script>
<link rel="stylesheet" href="/static/select2Plugin/select2.min.css" />
Source: https://expressjs.com/en/starter/static-files.html
Hope this will be found helpful.
I'm building a simple web app that will run on a server that doesn't have internet access. This node app is built by hand and not using webpack. Vue works, but I can't seem to get Vuetify to work. I have installed vuetify and material-design-icons using npm. Here is my index.html file:
<html>
<head>
<link rel="stylesheet" media="all" href="../node_modules/vuetify/dist/vuetify.min.css" type="text/css"/>
<link rel="stylesheet" href='../node_modules/material-design-icons-iconfont/dist/material-design-icons.css' type="text/css">
<script src="./scripts/vue.js"></script>
<script src="../node_modules/vuetify/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-toolbar app>
<v-toolbar-title>Title</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container>Hello world</v-container>
</v-content>
</v-app>
</div>
</body>
<script src="index.js"></script>
</html>
What am I missing?
Just before I posted this question I figured out the answer. So here it is if anyone else is looking for the same thing.
I copied the .css and .js files to folders under my root directory and referenced them in the tag. I also copied the fonts folder from the material-design-icons-iconfont\dist\fonts folder into my styles folder.
<head>
<link rel="stylesheet" media="all" href="./styles/vuetify.min.css" type="text/css"/>
<link rel="stylesheet" href='./styles/material-design-icons.css' type="text/css">
<script src="./scripts/vue.js"></script>
<script src="./scripts/vuetify.js"></script>
</head>
I just upgraded my Python Bokeh to 0.12.4 I get error JSON object has wrong type string. I don't have any local static CDN libraries. There is some info here but it is confusing. Does anybody have a simple answer for how to fix?
Note: my bokeh works fine in Jupyter. It is failing in the Flask web embedding case here:
script, div = components(plot) return render_template('graph.html',
script=script, div=div)
where the graph.html template looks like this:
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.4.min.css"
rel="stylesheet" type="text/css">
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.4.min.css"
rel="stylesheet" type="text/css">
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.4.min.js"></script>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.4.min.js"></script>
{{ script |safe }}
i had same error in my django template, when was upgrading from bokeh 0.12.6 to bokeh 0.12.14, so i had added the same bokeh static requirements
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.14.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.14.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.14.min.css" type="text/css">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.14.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.14.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.14.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.14.min.js"></script>
I have an HTML5 web app that I'm packaging up via Electron. I'm packaging via gulp-electron.
The issue I'm having is that when the app is built and I run it, none of the CSS or JS files that are referenced in the index.html file are being loaded.
I can see that the assets were included in the build, and are part of the .app bundle in the : myapp.app/Contents/Resources/app/ folder.
Matter of fact, if I cd to that directory and run a node webserver (httpster), the app runs fine in that manner.
Here's how my CSS/JS is referenced:
<!-- CSS -->
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="./styles/style.css" />
<link rel="stylesheet" href="./bower_components/angular-ui/build/angular-ui.min.css" type="text/css" media="screen">
<!-- Vendors -->
<script type="text/javascript" src="./js/nonangular/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./js/nonangular/jquery-1.11.2.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./bower_components/angular-ui/build/angular-ui.min.css" type="text/css" media="screen">
<!-- Non-angular libraries -->
<script type="text/javascript" src="./js/nonangular/lodash.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
<!-- Angular external libraries for application -->
<script type="text/javascript" src="./node_modules/angular/angular.js"></script>
<script type="text/javascript" src="./node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="./node_modules/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" src="./node_modules/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-ui/build/angular-ui.min.js" type="text/javascript"></script>
<script src="./node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="./node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js" type="text/javascript" charset="utf-8"></script>
<script src="./bower_components/angular-activity-monitor/activity-monitor.min.js" type="text/javascript"></script>
<!-- Angular components -->
<!-- build:appcomponents js/appcomponents.js -->
<script type="text/javascript" src="./js/app.js"></script>
<script type="text/javascript" src="./js/config.js"></script>
<script type="text/javascript" src="./components/directives/main.nav.directive.js"></script>
<!-- Application sections -->
<!-- build:mainapp js/mainapp.js -->
<script type="text/javascript" src="./js/controller.js"></script>
<script src="./components/main/mainController.js" type="text/javascript" charset="utf-8"></script>
I've tried changing the path to not include the './' before the folders referenced to no effect.
My Gulpfile electron task looks like this:
gulp.task('electron', function() {
gulp.src("")
.pipe(electron({
src: './app',
packageJson: packageJson,
release: './release',
cache: './cache',
version: 'v0.36.10',
packaging: true,
platforms: ['win32-ia32', 'darwin-x64'],
platformResources: {
darwin: {
CFBundleDisplayName: packageJson.name,
CFBundleIdentifier: packageJson.name,
CFBundleName: packageJson.name,
CFBundleVersion: packageJson.version,
icon: './app/gulp-electron.icns'
},
win: {
"version-string": packageJson.version,
"file-version": packageJson.version,
"product-version": packageJson.version,
"icon": './app/gulp-electron.ico'
}
}
}))
.pipe(gulp.dest(""));
});
My app folder structure looks like this:
The frustrating this is I've used this exact setup on another project and the executable works fine, and is able to reach all the assets bundled in the .app bundle just fine.
Turns out there were a few issues with paths.
First the CSS was using relative paths to reference images. Switching this to absolute paths did the trick. This was the same issue for the directives. Switching out relative paths with absolute paths did the trick there.
Finally, the actual CSS and JS files not being loaded looks to be because in the main index.html there was this:
<base href="/">
Which was messing with things. Removing that allowed the CSS and JS to load correctly.
Electron approaches files through file:// protocol, so any base hrefs should start with '.'
To make it work, in index.html (in case '/' is your base href)
change
<base href="/">
into
<base href="./">
..and the path errors will disappear.
So with electron apps we always need to compile the angular dist using a base href starting with '.', when / is your base, compile as
ng buid --prod --base-href ./
I finaly understood what is wrong with including static files in Electron
<link rel="stylesheet" href="./app/css/app.css">
<link rel="stylesheet" href="./app/libs/mdl/material.min.css">
This is not working because they are included from my index.html which is NOT in the root folder.
It's in "app/html/index.html" so I had to tell Electron where is the root of my project !
Simply add <base href="../../"> at the top of your index.html file including the scripts
For me I had to go back 2 folders up to get to the root of the projet. In your case it might less (../ then) or more (../../../ then), etc
I found out that you need to insert the href beginning with "../" like:
<link rel="stylesheet" type="text/css" href="../src/css/index.css"/>
I'm trying to rewrite some URL's on my website, and it works fine, I just have some issues with the stylesheets. All stylesheets works at index.php but not when url's like: localhost:8888/folder/path/(1,2,3,4)
I have my stylesheets in a file where they're listed like this:
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="includes/css/site.css"/>
<link rel="stylesheet" href="includes/css/viewProfile.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="includes/css/viewProvider.css" type="text/css" media="screen" title="no title" charset="utf-8">
Is there a way to fix this with mod_rewrite or how would I fix this?
This is because you use a relative path to the style sheets. Note that the browser sends requests to
localhost:8888/folder/path/includes/css/...
in that case. If the styles always reside in that configuration at the server root, you could simply make the relative URI an absolute one. Or you remove the path portion for CSS files on the server side.