I'm trying to render external stylesheets. I'm not sure why this is not working:
GO:
func main() {
http.HandleFunc("/", homeHandler)
http.HandleFunc("/image/", imageHandler)
http.Handle("/layout/", http.StripPrefix("/layout/", http.FileServer(http.Dir("layout"))))
http.ListenAndServe(":8000", nil)
}
Dir structure:
gocode
layout
stylesheets
home.css
home.html
main.go
HTML:
<link rel="stylesheet" type="text/css" href="/stylesheets/home.css" />
Whats wrong? I followed the example here: Rendering CSS in a Go Web Application
Your file server is at /layout/, so it should be
<link rel="stylesheet" type="text/css" href="/layout/stylesheets/home.css" />
Related
I am working on a laravel 8 project for learning purposes. I am new in jetstream, inertia.js here I can not understand how to add or link external CSS/js files in innertia.js.
Someone, please help me.
you can just add this on the main page layout :
<script src="{{ asset('js/data.js') }}"></script>
then add your js file in this path : public/js.yourfile.js
// Layout.vue
import { Head } from '#inertiajs/inertia-vue3'
<Head>
<title>My app</title>
<meta head-key="description" name="description" content="This is the default description" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<script src="your script location"></script>
</Head>
// About.vue
import { Head } from '#inertiajs/inertia-vue3'
<Head>
<title>About - My app</title>
<meta head-key="description" name="description" content="This is a page specific description" />
</Head>
Actually, there are many ways to link CSS/JS
Here I share a very simple way to link
first, you have to store your external file in the public directory for your project.
then in your index file
("asset" automatically locate public folder that's why you don't need to mention that.)
Note: same process for CSS file.
I am trying (unsuccessful) to include my css into my html. I have the files (executable, html and css)in the same directory "/test".
I have done some research over the subject but I can not still include the css in a proper way. For what I already saw if I include the css file starting with "/" it is relative to root folder so to confirm where is the root folder of the program I printed it and it is pointing to "C:\Users\Filipe\Desktop\go\src\test>" where are all my files.
test.go:
package main
import (
"fmt"
"net/http"
"os"
"text/template"
)
type Page struct {
Title string
NavItems []navItem
}
type navItem struct {
Item string
}
func indexHandler(w http.ResponseWriter, r *http.Request) {
page := Page{
Title: "title",
NavItems: []navItem{
{Item: "item1"},
{Item: "item2"},
},
}
t, _ := template.ParseFiles("index.html")
t.Execute(w, page)
}
func testHandler(w http.ResponseWriter, r *http.Request) {
fmt.Fprint(w, "/t directory test")
}
func main() {
http.HandleFunc("/", indexHandler)
fmt.Println(os.Getwd())
http.ListenAndServe(":8080", nil)
}
index.html:
<!DOCTYPE html>
<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">
<link rel="stylesheet" type="text/css" href="/mystyle.css">
<title>{{.Title}}</title>
</head>
<body>
<nav>
{{range .NavItems}}
<a>{{.Item}}<a>
{{end}}
</nav>
</body>
</html>
try to change -
<link rel="stylesheet" type="text/css" href="/mystyle.css">
to
<link rel="stylesheet" type="text/css" href="test/mystyle.css">
That will should solve the 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 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.
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">