Sample twitter bootstrap project

This sample demonstrates how to use twitter bootstrap with m2e wro4j support.

m2e wro4j will enable us to compile less files and merge + minimize js files.

You can go through this tutorial or you can directly fork https://github.com/gonzalad/wro4j-bootstrap-sample repo to see wro4j support in action.

Step 0 - Eclipse environment

Just make sure you have eclipse m2e ;)

Step 1 - Preparing eclipse project

Create a maven web projet from eclipse m2e.

Go to twitter's bootstrap github project and download the latest version - at the moment of writing the 2.0.4 tag (i.e. https://github.com/twitter/bootstrap/zipball/v2.0.4)

Copy js, img, css folders from bootstrap zip into your project's src/main/webapp

Step 2 - Create wro4j configuration

a. wro4j configuration

Create the following wro.xml in src/main/webapp/WEB-INF

<groups xmlns="http://www.isdc.ro/wro">	
  <group name="bootstrap">
    <css>/less/bootstrap.less</css>
    <js>/js/bootstrap-transition.js</js>
    <js>/js/bootstrap-alert.js</js>
    <js>/js/bootstrap-modal.js</js>
    <js>/js/bootstrap-dropdown.js</js>
    <js>/js/bootstrap-scrollspy.js</js>
    <js>/js/bootstrap-tab.js</js>
    <js>/js/bootstrap-tooltip.js</js>
    <js>/js/bootstrap-popover.js</js>
    <js>/js/bootstrap-button.js</js>
    <js>/js/bootstrap-collapse.js</js>
    <js>/js/bootstrap-carousel.js</js>
    <js>/js/bootstrap-typeahead.js</js>
  </group> 	  	
</groups>

It is possible to define a shorter version of wro.xml using wildcards:

<groups xmlns="http://www.isdc.ro/wro">	
  <group name="bootstrap">
    <css>/less/bootstrap.less</css>
    <js>/js/**.js</js>
  </group> 	  	
</groups>

In the above case, the all files with js extension will be added recursively in alphabetical order to the "bootstrap" group.

Create the following wro.properties in src/main/webapp/WEB-INF

preProcessors=cssImport,semicolonAppender	
postProcessors=lessCss,cssMinJawr

wro4j doesn't support less import directives, so you need to set cssImport as preProcessor and lessCss as postProcessor.

b. maven wro4j configuration

Edit your pom file, and add :

<build>
	<plugins>
		<plugin>
			<groupId>ro.isdc.wro4j</groupId>
			<artifactId>wro4j-maven-plugin</artifactId>
			<version>1.4.5</version>
			<executions>
				<execution>
					<phase>compile</phase>
					<goals>
						<goal>run</goal>
					</goals>
				</execution>
			</executions>
			<configuration>
				<targetGroups>bootstrap</targetGroups>
				<destinationFolder>${project.build.directory}/${project.build.finalName}</destinationFolder>
				<cssDestinationFolder>${project.build.directory}/${project.build.finalName}/css/</cssDestinationFolder>
				<jsDestinationFolder>${project.build.directory}/${project.build.finalName}/js/</jsDestinationFolder>
				<wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
			</configuration>
		</plugin>
	</plugins>
</build>

If everything works, m2e wtp should create the following 2 files :

• bootstrap-web\target\m2e-wtp\web-resources\js\bootstrap.js
• bootstrap-web\target\m2e-wtp\web-resources\less\bootstrap.css

##Step 3 - Testing your project

We'll just run bootstrap sample html files to see if everything works.

Create an html page containing some bootstrap code and use the following directives to import bootstrap css and js : <script src="js/bootstrap.js"></script>

See for instance https://github.com/gonzalad/wro4j-bootstrap-sample/blob/master/src/main/webapp/index.html.

Run your projet in your appserver (make sure you have the publish option enabled), and open you browser at http://localhost:8080/wro4j-bootstrap-sample/index.html

Now you can modify any bootstrap less file, m2e wro4j will automatically compile them to css, and they will be automatically updates without server restart.