I am using a angular app which is working fine locally, using
foreman start -p 9000 web
also using
grunt serve
when deploying to heroic, I am getting errors on missing css files. One example
https://rc-batchentry-dev.herokuapp.com/components/batch-review.css Failed to load resource: the server responded with a status of 404 (Not Found)
I am using grunt build tool.
web.js (relevant section)
// Static files
if (/development/.test(app.get('env'))) {
console.log('ENVIRONMENT: development');
app.use('/', express.static(__dirname + '/app'));
app.use('/', express.static(__dirname + '/.tmp'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
}
if (/production/.test(app.get('env'))) {
console.log('ENVIRONMENT: production');
app.use(express.static(__dirname + '/dist'));
}
// Start the server
app.listen(process.env.PORT || 9000, function () {
console.log('App started:', app.get('env'));
});
index.html
css section only:
<link rel="stylesheet" href="app.css"></link>
<link rel="stylesheet" href="bootstrap.css"></link>
<link rel="stylesheet" href="components/batch-delete.css"></link>
<link rel="stylesheet" href="components/batch-design.css"></link>
<link rel="stylesheet" href="components/batch-edit.css"></link>
<link rel="stylesheet" href="components/batch-import.css"></link>
<link rel="stylesheet" href="components/batch-review.css"></link>
<link rel="stylesheet" href="components/batch-revisions.css"></link>
<link rel="stylesheet" href="components/batch-view.css"></link>
<link rel="stylesheet" href="components/batches.css"></link>
<link rel="stylesheet" href="components/monitor.css"></link>
<link rel="stylesheet" href="components/unsupported.css"></link>
heroku config:set NODE_ENV=production
The above environment setting resolved it, when I looked at the heroku logs it was pointing to development.
Related
I would like to sort table using tablesorter with expectation like the attached fiddle
https://jsfiddle.net/saranya2020/ykn035rf/6/
Table sorts but the problem is my first column has an href link when only when +icon clicked it should expand. But after applying the below script tags for sorting,when i click up or down arrow my href automatically expands:( and during page load is get error,
Uncaught TypeError: Cannot read property 'themes' of undefined
#line: $.extend($.tablesorter.themes.jui, {
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.css"/>
<link rel="stylesheet" href=" https://mottie.github.io/tablesorter/css/theme.bootstrap.css"/>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.black-ice.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../css/theme.jui.min.css"/>
Please let me know what i have missed or added wrong to avoid this problem.
My project structure:
resoureces
static
css
js
templates
a.html
b.html
My application.yml:
resources:
static-locations: classpath:/
And my html code:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta content="webkit" name="renderer">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="shortcut icon" href="static/img/favicon.ico" />
<script src="static/js/jquery-3.2.1.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-confirm.min.js"></script>
<link href="static/css/reset.css" rel="stylesheet">
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/pretty.css" rel="stylesheet">
<link href="static/css/iconfont.css" rel="stylesheet">
<link href="static/css/common.css" rel="stylesheet">
<link href="static/css/jquery-confirm.min.css" rel="stylesheet">
</head>
<body>
<p>test</p>
</body>
My controller:
#Controller
public class IndexController {
#GetMapping("/index")
public String toIndex(){
return "index";
}
#GetMapping("/index/test")
public String test(){
return "index";
}
}
/index css and js success
but /index/test idea show no mapping for it
What is the correct configuration?
HTML How to link CSS and JS?
The issue is that you're using relative paths, such as static/css/reset.css.
Your browser will handle these by using the current path, and append the relative one.
Assuming that you're running your application on port 8080, when you call http://localhost:8080/index, the resources will be fetched from http://localhost:8080/static/css/reset.css. However, when you're calling /index/test, the relative path would refer to http://localhost:8080/index/static/css/reset.css.
That means that due to you using relative paths, it will fetch the resources from a different location if your path is different.
One possible solution is to use a <base /> tag within the <head> section of your HTML, such as:
<base href="/" />
By setting the <base /> tag, you're telling your browser where to relatively fetch resources from.
More detailed information can be found within this question.
Also, be aware that by default, Spring boot will serve resources within src/main/resources/static on the context path itself, so might have to drop the static/ part from the URLs, such as:
<link href="css/reset.css" rel="stylesheet">
I used gulp and Laravel blade when run gulp,
Do I want thing?
I want {{ asset('/') }} append to perfix URL build
head-include.blade.php Before running gulp
<!-- build:css resources/assets/css/out.css -->
<link rel="stylesheet" href="resources/assets/css/1.css">
<link rel="stylesheet" href="resources/assets/css/2.css">
<!-- endbuild -->
gulpfiles.js
...
gulp.task('useref', function(){
return gulp.src(paths.assets.html)
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest(paths.dev.html))
});
...
head-include.blade.php After running gulp
<link rel="stylesheet" href="resources/assets/css/out.css">
But i want it:
i want {{ asset('/') }} append to perfix url build
head-include.blade.php I want ..
<link rel="stylesheet" href="{{ asset('/') }} resources/assets/css/out.css">
install gulp-replace
npm install gulp-replace --save-dev
replace = require('gulp-replace');
gulp.task('useref', function(){
return gulp.src(paths.assets.view)
.pipe(replace("{{ asset('resources/assets') }}", 'resources/assets'))
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest(paths.dev.view))
.pipe(replace('../assets', "{{ asset('resources/assets') }}"))
.pipe(gulp.dest(paths.dev.view))
});
<!-- build:css(./) resources/assets/css/out.css -->
<link rel="stylesheet" href="{{ asset('resources/assets') }}/css/1.css">
<link rel="stylesheet" href="{{ asset('resources/assets') }}/css/2.css">
<!-- endbuild -->
I am probably missing something very simple but, when I link my style sheet I get:
<link media="all" type="text/css" rel="stylesheet" href="http://laravel.dev:8000/public/css/masterCss.css">
showing on the webpage rather then linking to my css file.
My Html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The Nub Life</title>
{{ Html::style('/public/css/masterCss.css') }}
</head>
<body>
#yield('content')
</body>
</html>
Why is this happening and how can I fix it?
the stylesheet href url, should not contain the word public. this is how you can generate url for your css asset files
<link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/masterCss.css') }}">
Suppose you have a .css file in your public/your_project_name/css/style.css
Simply write
<link href="{{ URL::asset('your_project_name/css/style.css') }}" rel="stylesheet">
I have a validator problem:
Bad value http://fonts.googleapis.com/css?family=Dosis:400,700,800|Varela+Round|Architects+Daughter for attribute href on element link: Illegal character in query: not a URL code point.
But I have the follow code, no spaces anywhere:
<link href="http://fonts.googleapis.com/css?family=Dosis:400,700,800|Varela+Round|Architects+Daughter/" rel="stylesheet" type="text/css">
in the link href change | by %7C
There are 2 ways to fix this validation problem:
URL encode the | (vertical bar/line) character in the href attribute of the link element (as %7C) :
<link href="http://fonts.googleapis.com/css?family=Dosis:400,700,800%7CVarela+Round%7CArchitects+Daughter" rel="stylesheet" type="text/css">
Separate fonts inclusion with multiple link elements :
<link href="http://fonts.googleapis.com/css?family=Dosis:400,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet" type="text/css">
Avoid illegal characters such as empty space. For example, instead of <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Carter One" /> use <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Carter+One" />.