I want want to create an index.jsp file instead of index.html while doing production build. This weird requirement is for capturing the header part which we will getting from other Oracle Authentication Manager so I want load my appliation from index.jsp. My index.jsp should look something like this
<%# page language="java" import="java.util.*" session="true" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CardEncryption</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.3ff695c00d717f2d2a11.css"></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.06daa30a2963fa413676.js"></script><script type="text/javascript" src="polyfills.9a8743e2009b1e7b1fbd.js"></script><script type="text/javascript" src="main.dcf4ad6dff6130812df3.js"></script></body>
</html>
Any suggestion to do this.
I suppose you only want the index.jsp when doing the production build. The development process should still use index.html
In that case you should
Create a index.jsp file in the same directory as your index.html file (so you have both).
Update your angular.json file's production configuration by adding an index property to your production configuration like this:
That will make sure that it uses index.jsp when you build with --prod, but still uses index.html for development.
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'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.
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 have a polymer 0.10+ web app that works in Dartium (Dart VM) and worked until Polymer 0.10.0-pre.12.
When I compile it to JS (Pub Build) and run it as JS under Google Chrome, my polymer (big) component doesn't appear and I have this message in console :
"Resource interpreted as Script but transferred with MIME type application/dart: "127.0.0.1:8080/cvwebkit.html_bootstrap.dart". cvwebkit.html:295"
line 295 : <script type="application/dart" src="cvwebkit.html_bootstrap.dart"></script></body></html>
When I change this line to <script src="cvwebkit.html_bootstrap.dart.js"></script></body></html> in cvwebkit.html in the build directory, it works.
When I launch directly the modified file, I have this url and it works (at least partially) 127.0.0.1:3030/CVWebkit/WebApp/build/web/cvwebkit.html
When I launch normally the "dev" file as JS, I have the above issue with this url : 127.0.0.1:8080/cvwebkit.html
My "head" :
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CVWebKit</title>
<link rel="stylesheet" href="cvwebkit.css">
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="imgdyn.html"> <!--to ensure dynamic assets are created by polymer, so that there is no attempt first by the browser-->
<link rel="import" href="cvwebkitscript.html"> <!--needed to include the link to the dart script as we can't use both "src" and "export" in the script line-->
<link rel="import" href="zone-ruban.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
</head>
Any idea ?