I'm working on a PWA testing it on localhost Xampp server. Here's my folder structure
/
|- css
| |- style.css
|- sub
| |- other.html
|- index.html
|- manifest.webmanifest
|- service-worker.js
|- offline.html
offline.html has a link to css file css/style.css in the head tag. When I'm at the URL localhost/index.html and I go offline, the offline page loads perfectly. But when I go to localhost/sub/other.html and go offline, the style.css can not load (it is cached).
The browser is looking for the file in localhost/sub/css/style.css. So I guess the location in offline.html for style.css needs to be ../css/style.css.
How do I handle this location problem with sub directories?
If the contents of your /offline.html file are used to fulfill offline navigations for any arbitrary URL, you've got two options to ensure that your subresources are loaded properly:
Always use absolute URLs when specifying the src or href of subresources. In other words, use <link href="/css/style.css" ...> instead of <link href="css/style.css" ...>.
Add a <base href="/"> tag to your offline.html HTML, which will cause all subresource URLs to be resolved relative to /.
Related
I am trying to deploy to IIS. Not in root but in a sub-folder.
This is working:
edit web/index.html, change <base href="/"> to <base href="/ChangeTag/">
run flutter build web command
the build/web/index.html is ok, with the new changes.
Perfect!
BUT, when I try to debug using localhost: web pages does not found - error 404
What I want is to deploy (automatically), inside a sub-folder of wwwroot and execute local test too, without modifying index.html a lot of times
Is it possible to do something like in Angular, use proxies, use different build configs, etc?
Thanks
I've got a similar problem after upgrading flutter and dart to current version (beta channel), I mean it was good on debugging mode and It did not working on build release.
What I did? I just commented this <base href="/"> line at index.html file (located inside the <your_app_folder_name>/web folder) and both (debugging and release builds) went back to working like charm.
I did comment by changing the line
<base href="/">
to
<!-- <base href="/"> -->
Do the change and: try to run a flutter build web command, copy the generated web folder located at <your_app_folder_name>/build/ path to any subfolder (such as <your_websrv_root>/webtestfolder) of the your webserver, and it will work at the address http://webtestfolder of your browser.
Stop manually updating base-href
Instead of using
flutter build web
Try
flutter build web --base-href /sub_folder_name/
This will change the base URL of your build/web/index.html
Bounus
Or if you are using github actions to deploy on github-pages.
This will create a subfolder name, same as your repository name (username.github.io/{repo-name})
- run: flutter build web --base-href /${{ github.event.repository.name }}/
Here is full workflow example: flutter_github_pages_deploy.yaml
Note
Just make sure that your web/index.html contains
<base href="$FLUTTER_BASE_HREF">
The answer is in the index.html file on the web folder (not /build/web)
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/sub-folder/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
I'm trying to host my jekyll static website at github pages and almost everything is working fine. I tried everything to make my CSS generated file (from SASS) to work. But could not do it.
My website is on this URL: http://pedromarins.github.io/
My github repo is here: https://github.com/pedromarins/pedromarins.github.io/
My _config.yml is setted up as
baseurl: ""
and
url: "http://pedromarins.github.io"
also my sass folder is setted up as
sass:
sass_dir: assets/_sass
style: compressed
I can't see what is wrong. If someone could help and point what is wrong I appreciate!
UPDATE 1 - 18h37 29-April-2017
Installed ghpages gem. Now my Gemfile looks like this:
source "https://rubygems.org"
require 'json'
require 'open-uri'
gem 'jekyll'
gem 'github-pages'
gem "json", "2.0.2"
group :jekyll_plugins do
gem 'jekyll-livereload'
end
Ok, after some hours trying to make your site work I found a solution.
What I figured out was that Jekyll only looks for the css directory at root level, so in order to make your site to work properly you need to add the css directory at root level and place in there your style.sass file.
After that, the Jekyll build process will generate the style.css file in that directory, so you just need to include that file in the head.html partial.
<link rel="stylesheet" href="/css/style.css">
And your site will just work as expected, no css rendering problems at all, you can leave your sass dir as assets/_sass with no problem, that directory is just to tell the css/style.sass file that the sass #imports are found in there.
So you can reference them just like you are doing:
---
---
#import "layout"
#import "components/header"
#import "components/now"
...
Now, another workaround is to have your style.sass file in your assets folder, but not in the css folder, just leave it in the assets folder, and access it from your head.html partial as:
<link rel="stylesheet" href="/assets/style.css">
And it will work too.
Just remember to set the correct path for your other non-css assets like images, icons or fonts.
Description
Trying out github pages with a project that files are organized like this:
/index.html
/landingpage/css/styles.css
/vendor/bootstrap/css/bootstrap.css
in index.html including the project's specific css file works:
<link href="landingpage/css/styles.css" rel="stylesheet">
but including vendor's css file doesn't:
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.css">
When loading the page, I get a 200 http response to:
GET https://loicjaouen.github.io/landingpage/landingpage/css/styles.css
and a 404 to:
GET https://loicjaouen.github.io/landingpage/vendor/bootstrap/css/bootstrap.css
Question
What's wrong with including a vendor subdir that prevents github pages from serving files inside vendor?
Reference
https://github.com/loicjaouen/landingpage/tree/original-brokenlinks
first attempt
Move subdir vendor inside existing landingpage.
See code at https://github.com/loicjaouen/landingpage/tree/brokenlinks
That worked... but it was not quite satisfactory to guess that only one subdir could be included.
second attempt
Leave subdir vendor at root level and rename it to other.
See code at: https://github.com/loicjaouen/landingpage/tree/non-vendor-subdir
That worked too: apparently including a subdir named vendor is not allowed
How do I make my own design in jekyll blog ? Currently I have the default minima theme I got by jekyll new my-blog and no idea of how to get started on designing my own posts, main etc layouts. For some reason I don't see the typical _layouts and _includes folders when I ran the jekyll new command
I don't see the typical _layouts and _includes folders when I ran the Jekyll new command
Then start by creating them. They are just folders. You can start a layout with this minimal structure in a file _layouts/main.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
{{ content }}
</body>
</html>
With an "hello world" be like this:
---
layout: main
---
Hello World
Then extend the layout with whatever you want, like a normal web page: css, header, footer, ...
I've been trying out Sinatra on my local Windows machine. I want to include some local CSS and JS files. This is how the code looks in layout.erb
<script src="jquery.js" type="text/javascript">
</script>
<link rel="stylesheet" href="reset.css" type="text/css" />
All my files are in the same folder as app.rb
This is my app.rb
require 'rubygems'
require 'sinatra'
get '/' do
erb :index
end
For some reason, I cant see these files included in my pages. When I view the source code and click on the file(JS/CSS) I see that - "Sinatra doesn't know this ditty"- error.
What am I doing wrong here?
Move your static files(css/js) into a folder named public. Sinatra looks there with default settings.
If you want to change that behaviour have a look at this: Static Files
By default Sinatra will look for static files in your public folder. You just need to make a folder called public in the same directory as your Ruby file, and place your JS and CSS files there.