Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Bower with Play

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?

like image 761
BenMorganIO Avatar asked May 27 '14 21:05

BenMorganIO


People also ask

What is bower used for?

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.

Is bower still used?

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.

What are bower components?

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.


1 Answers

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.

like image 129
BenMorganIO Avatar answered Sep 29 '22 12:09

BenMorganIO