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?
Bower provides hooks to facilitate using packages in your tools and workflows. Bower is optimized for the front-end. If multiple packages depend on a package - jQuery for example - Bower will download jQuery just once. This is known as a flat dependency graph and it helps reduce page load.
1. Bower has been deprecated by its creators. After a long and heated debate on Github, the creators of Bower decided it does not add value to the current web development stack and should be discontinued.
Bower is a package manager for client-side libraries and components that contain HTML, CSS, JavaScript, fonts, image files, and so on. You can install, locate, upgrade, and remove Bower packages without leaving WebStorm, on the dedicated Bower page or from the command line in the built-in terminal.
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 dist
s 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With