CODEWITHSUNDEEP
jquerytwitter-bootstrapdependency-management
Jan Wrobel
Jan Wrobel

Reputation: 7099

Packaging jquery and bootstrap

What are common and convenient ways for projects that are using jquery or bootstrap to install these dependencies?

I'm writing a web application that is using Django at a server side and jquery and bootstrap at a client side. The topic of automatically installing Python dependencies is quite well covered, there are at least two reasonable options (Pip and Buildout). But I can't find any information how to best install the front end dependencies.

The ultimate goal is to configure development environment with just two commands: 1. git checkout 2. setup that downloads and install all dependencies: Python stuff + jquery + bootstrap.

Upvotes: 2

Views: 3539

Answers (1)

Ivo Bosticky
Ivo Bosticky

Reputation: 6408

Most front end JavaScript libraries should be included by reference in your HTML, so there is no need download/install it. If you plan to modify JavaScript libraries, you will have to host the modified code yourself.

So in your case you could use Google Libraries API to load jquery like so:

<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7.1");</script>

Most sites keep their customized Bootstrap assets in their own repository, and host them directly. Bootstrap customization is described at http://twitter.github.com/bootstrap/download.html. Bootstrap loading code should look something like this:

<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="/static/src/bootstrap_base.js"></script>
<!--    <script src="/static/bootstrap/js/jquery.js"></script>  -->
<!--    <script src="/static/bootstrap/js/bootstrap-transition.js"></script> -->
<script src="/static/bootstrap/js/bootstrap-alert.js"></script> 
<script src="/static/bootstrap/js/bootstrap-modal.js"></script>
<script src="/static/bootstrap/js/bootstrap-dropdown.js"></script> 
<!--    <script src="/static/bootstrap/js/bootstrap-scrollspy.js"></script> -->
<script src="/static/bootstrap/js/bootstrap-tab.js"></script> 
<!--    <script src="/static/bootstrap/js/bootstrap-tooltip.js"></script> -->
<!--    <script src="/static/bootstrap/js/bootstrap-popover.js"></script> -->
<script src="/static/bootstrap/js/bootstrap-button.js"></script> 
<script src="/static/bootstrap/js/bootstrap-collapse.js"></script>
<!--    <script src="/static/bootstrap/js/bootstrap-carousel.js"></script> -->
<!--    <script src="/static/bootstrap/js/bootstrap-typeahead.js"></script> -->

If you don't want to host the bootstrap javascript, you could always link to the latest version directly:

<!-- This is NOT recommended -->
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap_base.js"></script>
<!--    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script> -->
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script> 
etc..

Upvotes: 2

Related Questions