This is what my file structure looks like in Play:
- public
- bower_components
- images
- stylesheets
This is my <head>:
<head>
<title>#title</title>
<link rel="shortcut icon" href='#routes.Assets.at("images/favicon.png")'>
<link rel="stylesheet" media="screen" href='#routes.Assets.at("bower_components/bootstrap/dist/css/bootstrap.min.css")'>
<link rel="stylesheet" media="screen" href='#routes.Assets.at("stylesheets/main.css")'>
<script src='#routes.Assets.at("bower_components/jquery/dist/jquery.min.js")'></script>
<script src='#routes.Assets.at("bower_components/bootstrap/dist/js/bootstrap.min.js")'></script>
</head>
The routes:
GET / controllers.Application.index
GET /public controllers.Application.public
GET /assets/*file controllers.Assets.at(path="/public", file)
It works on development I am getting 200s. When I deploy to Heroku, I get 404s for all bower components except for the stylesheets and images directories.
I'm under the assumption that it may be because Play is not able to recognize the bower components directory. Does anyone know how to add a new directory for play to build from for the assets?
When using bower with play, be mindful that the assets that you will use are stored within the /dist folder. Now, you may not think this is a big deal, but if you check the default .gitignore file, you'll discover that on one single line it has these four characters:
dist
That is enough to ignore all dists within your application. Just delete the line, run git status, and you'll discover you'll have some new files to add to your repo.
Commit and push to Heroku. You should be good to go by now.
Related
So I'm working with flutter web + cloud firestore
To get cloud firestore working I have to modify my index.html. The problem is every time I run
flutter build web
It overwrites my index.html and I have to manually re-add all the necessary code snippets to get it working again.
Is a way I can run flutter build web without it overwriting index.html?
Another related issue is that when I deploy the site to firebase, it works fine, but when I run this site locally for testing using
flutter run -d chrome
when it runs on chrome the site is again using a brand new index.html without the necessary code so it doesn't work. I have no opportunity to edit the index.html to apply the necessary code since it builds and runs immediately.
Is there a fix for this?
You should modify index.html file in the <project>/web folder, but not in the <project>/build/web folder. This file will be copied to <project>/build/web folder during build process.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flutter web</title>
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<script defer src="main.dart.js" type="application/javascript"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.0/firebase-auth.js"></script>
</head>
<body>
<h1>This text will be copied to the target HTML, but covered by flutter web app</h1>
</body>
</html>
How to include Ionic 4's CSS and JS in a static website without using CDN url’s?
When we tried to download the JS file to local and refer it as <script type='text/javascript' src="ionic.js"></script> , the page loads “Empty” with an error in Chrome dev console. The same works if we refer it from CDN.
Downloaded the js file from https://unpkg.com/#ionic/core#4.0.0/dist/ionic.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- <script src="https://unpkg.com/#ionic/core#4.0.0/dist/ionic.js"></script> -->
<script type='text/javascript' src="ionic.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#ionic/core#4.0.0/css/ionic.bundle.css">
</head>
<body>
<ion-title>Sample Title</ion-title>
</body>
</html>
Thanks ghybs
ionic.js depends on about another 135 js files under #ionic/core/dist/ionc. After including the entire #ionic/core folder in my static website project folder, the pages with ion components loaded properly.
Here's the solution to build static websites using Ionic Framework:
Folder structure should be:
projectFolder
|_core
| |_css
| | |_ionic.bundle.css
| |_dist
| |_ionic (contains all dependent js files)
| |_ionic.js
|_index.html
How to get ionic core?
Run the below command.
$ npm install #ionic/core
This will generate node_modules folder. Copy the folder from node_modules/#ionic/core to your project.
index.html
<html lang="en">
<head>
<script type='text/javascript' src="core/dist/ionic.js"></script>
<link rel="stylesheet" href="core/css/ionic.bundle.css">
</head>
<body>
<ion-title>Sample</ion-title>
</body>
GitHub repo of the above example
Maybe you could try deploying the App with or without Cordoba as Webapp? That result should ne a static website in your dist folder.
https://forum.ionicframework.com/t/how-to-deploy-for-all-three-platforms-ios-android-and-web-too/100493/2
What is different between ionic 4 and common JS libraries is that ionic 4 uses lazy loading so that your user does not load components that are not used in your app.
As a consequence, ionic 4 is split in many different JS files. While it is true you only need to reference a single entry file in your HTML, ionic 4 expects the rest of the files to be available alongside this entry file. That is why you see in your dev console an extra network request to an ionic JS asset with hash file name.
You can browse https://unpkg.com/#ionic/core#4.0.0/dist/ionic/ to get an idea of what that means (although ionic will probably load only the chunks, not the individual components).
Then the entry file will automatically try loading these extra chunks whenever it sees ionic custom web elements on the page.
Therefore what you miss is simply to make available all these extra JS files at the same location as your entry file.
As to retrieve them, you can get a zip of released assets on the GitHub release page, from jsdelivr, or from npm.
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
I'm debugging an offline application, and Chrome's Dev Tools Network tab doesn't seem to show any information at all about the cache manifest download. I see the download of the main page, followed by its various resources, but there's no network entry for the manifest identified on the html element — not initially, and not at the end when it re-downloads it to see if it changed.
Is there some magic option to makes Dev Tools show the manifest download as well?
For example, say we have index.html:
<!DOCTYPE html>
<html manifest="m.appcache">
<head>
<!-- ...usual head stuff... -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ...some content... -->
<script src="script.js"></script>
</body>
</html>
And the manifest looks like:
CACHE MANIFEST
# v1
style.css
script.js
On the network tab, I'll see entries for index.html, style.css, and script.js, but none for m.appcache, even though I know the browser requests it (twice) when initially caching the page.
In chrome-dev-tools the place you can check everything is the application tab. Not sure, but there might also be your m.appcache file.
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.