I have a simple setup with an index.html, some js file and a sass file, building it with vite. I am using vite defaults without a config file.
After running a build the index.html in the dist folder references everything as static paths:
<head>
<script type="module" crossorigin src="/assets/index.b850bc1f.js"></script>
<link rel="stylesheet" href="/assets/index.04d1c13d.css">
</head>
The same happens to url() paths in css: They are turned into static paths as well.
My question is: Is there a configuration option to make vite output relative paths, so:
<head>
<script type="module" crossorigin src="assets/index.b850bc1f.js"></script>
<link rel="stylesheet" href="assets/index.04d1c13d.css">
</head>
This leading path is the base URL, configured by the base option, which is / by default.
You can remove the base URL by setting base to an empty string, making the path relative to its deployment directory:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
base: '', 👈
})
demo
Related
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="/slim/app/views/animations/jquery.min.js"></script>
<script type="text/javascript" src="/slim/app/views/animations/bootstrap.min.js"></script>
<link rel="stylesheet" href="/slim/app/views/animations/bootstrap.min.css">
</head>
<body>
<div class="container">
hello
</div>
</body>
</html>
I have to specify full directory path for loading the js and css files
(jquery.min.js and bootstrp.min.js and bootstrap.min.css).Here i have
(/slim/app/views/animations/) as the directory which contain all the
files. if currently i am in the views directory i should use the
(animations/whatever the file name) but it is not working in these
way. but if i use the full directory path it all works fine. why these
is happening can anyone explain.
(slim) is my root directory where i installed slim
Using Relative paths is not how you typically work with Slim. Your assets (JavaScript/CSS/images, etc) should be referenced absolute from your views:
src="/assets/js/myapp.js"
Routed URLs do not map directly to file system based resources because templates should not be accessed by URL publically - they are only served by the controllers.
A common slim file structure looks like this:
app/
public/index.php
templates/
view.html
assets/
images/
js/
css/
Some add the assets subfolders directly into the public folder.
Others have those folders on the root level.
However, in general, public assets (e.g. CSS, JS, images) should be beneath the public document root (accessible to the public).
One thing that could be helpful if you do not like this behavior is to use Slim's basePath variable.
You should be able to set the base URL as a View variable in a slim.before callback in your index.php so that it is available to all routes like this:
$app->hook('slim.before', function () use ($app) {
$app->view()->appendData(array('baseUrl' => '/base/url/here'));
});
or
$app->hook('slim.before', function () use ($app) {
$posIndex = strpos( $_SERVER['PHP_SELF'], '/index.php');
$baseUrl = substr( $_SERVER['PHP_SELF'], 0, $posIndex);
$app->view()->appendData(array('baseUrl' => $baseUrl ));
});
And then apply it to the references in your HTML tag of the base template file and that's it.
<link rel="stylesheet" type="text/css" href="{{ base_url() }}/css/style.css" />
Or use Uri::getBaseUrl(), e.g.
$basePath = $request->getUri()->getBasePath();
I have this project structure:
app
server.js
frontend
build
index.html
build directory is the result after npm run build in my React app (created with create-react-app). There are more files but I omit them for the example.
I want to serve the React app as static files, so in server.js, I have this:
app.use(express.static(path.resolve(__dirname, 'frontend/build')));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'frontend/build', 'index.html'));
});
app.listen(9001);
I navigate to http://localhost:9001 in my browser and there are no errors but the screen is blank. React app is not shown.
If I run the React app (from inside frontend directory) with npm start, it works properly (in default webpack port 3000).
This is the build/index.html file (pretty printed):
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"/>
<title>React App</title><link href="/static/css/main.65027555.css" rel="stylesheet"></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.a4d4d402.js"></script>
</body>
</html>
If I navigate to http://localhost:9001/static/js/main.a4d4d402.js, I can see the javascript file.
I found the error. There was an error in the bootstrap imports in index.html. I was closing a tag twice. In my question looks well because I have pretty printed by hand and maybe I have corrected it somehow.
I am new to grunt and tests and currently I have setup like this:
Grunt running tasks after which I have build folder where I have my compiled index.html and all his resources (css, js, images)
Now I want to run tests using grunt-mocha-phantomjs and it needs additions to my index.html like:
<link href="../node_modules/mocha/mocha.css" media="screen" rel="stylesheet" type="text/css" />
Inside head tag and:
<div id="mocha"></div>
<script src="../node_modules/mocha/mocha.js" type="text/javascript" charset="utf-8"></script>
<script src="../node_modules/chai/chai.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mocha.ui('bdd');
expect = chai.expect;
</script>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mocha.run();
</script>
Inside body tag.
I want to be able to open that modified index.html in web-browser too. (I have setup apache for it and example test works great both in grunt and web-browser)
So I am planning using task grunt-contrib-copy to copy all files from my build directory to test directory and add those lines to index.html and then launch mocha_phantomjs task.
Is this correct way to do it?
Which NpmTask can do it?
Not sure about "Is this correct way to do it?" part but I solved it.
I used grunt-html-build and its Removing parts feature.
Removing phantom's code for build folder, and keep it for testing folder.
It works great.
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 am developing an Angular app with Nodejs and gulp. I have wrote my TypeScript file in client folder and my gulp task complete those file and place them in public folder.
Here is my components.ts file:
import {Component, View} from 'angular2/angular2';
import {FormBuilder, formDirectives } from 'angular2/forms';
#Component({
selector: 'login',
injectables: [FormBuilder]
})
#View({
templateUrl: '/scripts/src/components/login/login.html',
directives: [formDirectives]
})
export class login {
}
here is my bootstrap file:
import {bootstrap} from 'angular2/angular2';
import {login} from './components/login/login';
bootstrap(login);
Here is my index.html:
<!doctype HTML>
<html>
<head>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime#0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system#0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.27/router.dev.js"></script>
</head>
<body>
<div class="container">
<login></login>
</div>
<script>
System.import('scripts/src/bootstrap');
</script>
</body>
</html>
Here is my server.js file setting which lies in app folder
app.use(express.static(path.join(__dirname, '../public')));
But when I load my app in browser, I am unable to load the template.
Here is my file structure:
Few Errors that i have found in your coding is listed below:
First of all your imports is incorrect you may refer to this question for all Updated Imports for angular2 Beta.
https://stackoverflow.com/a/34354666/5043867
Formdirectives has been changed to FORM_DIRECTIVES.
your Path is not proper i think for the login.html file from the bootstraped file.
and most importantly ANgular2 is in beta now you are still using alpha26(which is too old now).
Use template and not templateUrl. Some thing like template: require( './login.html )
As others have mentioned, you should be using Beta 1, as people will be more inclined to answer questions.
HTH