How to collect and install bower managed package images and fonts in Elastic Beanstalk

Question

So, I have a Flask application (based on the great starter application at https://github.com/sloria/cookiecutter-flask) that I am trying to setup for deployment to elastic beanstalk. The application uses the bower package manager to install javascript libraries and dependencies.

The Problem: I have setup my container to correctly install npm and bower (using the sample from https://gist.github.com/growingdever/8eb2ae8e5793b9c1cd09) and the associated .css and .js assets are all available to my application (using Flask-Assets), but the associated image and fonts files are still in their package directories.

My proposed solution: I need to collect them all and move them to app/static/images and app/static/fonts for the packages to find them. Has anyone solved this problem before?

Deano · Accepted Answer · 2015-08-13T14:27:07.600

So the simple solution is the best. Using symlinks to put the files in the right place works.

An alternative would be running container_commands to copy the files from the bower packages works. In the snippet below, you can replace the word app with the directory/name of your app. I have told bower to install packages into app/static/libs.

container_commands:
    04_project_bower_install:
        command: 'bower --allow-root install'
        leader-only: 'false'
    05_move_fonts:
        command: 'mkdir -p app/static/fonts;
            export DIRS=`find app/static/libs -name fonts -type d -print `;
            export FILES=`find $DIRS \( -name \*.ttf -o -name \*.woff -o -name \*.woff2 -o -name \*.eot -o -name \*.svg \) -print`;
            echo "copying fonts $FILES";
            cp -fu $FILES app/static/fonts'
        leader-only: 'false'
    06_move_images:
        command: 'mkdir -p app/static/images;
            export DIRS=`find app/static/libs -name images -type d -print `;
            export FILES=`find $DIRS \( -name "*.jpg" -or -name "*.png" -or -name "*.gif" -or -name "*.svg" \) -print -maxdepth 1 -type f`;
            echo "copying image $FILES";
            cp -fu $FILES app/static/images'
        leader-only: 'false'

Arguably, it might be easier to write a small asset_setup.sh and run that instead of embedding the copy commands in the .ebextensions config files.

How to collect and install bower managed package images and fonts in Elastic Beanstalk

1 Answers1