Sencha CMD app build integrated with Maven in Openshift cloud

If you are developing Java web applications, you may be looking for stable, feature rich cloud environment. In this case I recommend Red Hat Openshift cloud. The times are gone when there were unexpected downtimes of the service, or your application got halted if there were no requests for couple of days.

So it’s no surprise that my current project www.exmerg.com also runs on Openshift platform using JBoss cartridge. On the front-end I decided to use Sencha ExtJS 4, mainly because its excellent Grid component which greatly satisfied project requirements.

Install Sencha CMD in cloud
In my previous blog posts we discussed how to copy application build produced by Sencha CMD into WAR automatically during Maven build.
In this blog we will go a step further by invoking Sencha CMD command sencha app build from Maven. But how to invoke Sencha CMD commands in cloud environment such as Openshift?
We need to install Sencha CMD into directory in which our application runs. Log into you Openshift web account, open application detail and in the right bottom corner, click on Want to log in to your application?, copy the command and run it in your command line.

After logging into your Openshift application account via command line, you’ll find out that the only writable directory is $OPENSHIFT_DATA_DIR, which defaults to /app-root/data.
Let’s install Sencha CMD with following commands:

cd $OPENSHIFT_DATA_DIR
wget http://cdn.sencha.com/cmd/4.0.4.84/SenchaCmd-4.0.4.84-linux-x64.run.zip
unzip SenchaCmd-4.0.4.84-linux-x64.run.zip 
chmod +x SenchaCmd-4.0.4.84-linux-x64.run
./SenchaCmd-4.0.4.84-linux-x64.run

During the installation process, change default Installation Directory from [/var/lib/openshift/<>/bin] to /var/lib/openshift/<>/app-root/data (this is done because bin directory is not writeable by common user).

Maven setup
Navigate to the directory in which Sencha CMD was installed, and use pwd to get the whole path. It should look something like:
/var/lib/openshift/533043e850044602750007a1/app-root/data/Sencha/Cmd/4.0.4.84
Copy the path into your application’s pom.xml and add following plugins to your openshift profile:

...
<profile>
  <id>openshift</id>
  <properties>
    <hibernate.method>update</hibernate.method>
    <hibernate.show_sql>false</hibernate.show_sql>
    <cmd.dir>/var/lib/openshift/533043e850044602750007a1/app-root/data/Sencha/Cmd/4.0.4.84/</cmd.dir>
  </properties>
  <build>
    <finalName>${project.name}</finalName>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-antrun-plugin</artifactId>
        <version>1.7</version>
        <executions>
          <execution>
            <id>sencha-app-build</id>
            <phase>process-resources</phase>
            <goals>
              <goal>run</goal>
            </goals>
            <configuration>
              <target>
                <taskdef resource="com/sencha/ant/antlib.xml" classpath="${cmd.dir}/sencha.jar" />
                <x-sencha-command dir="${basedir}/src/main/webapp">
                  app
                  build
                </x-sencha-command>
              </target>
            </configuration>
          </execution>
        </executions>
      </plugin>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-resources-plugin</artifactId>
        <version>2.6</version>
        <executions>
          <execution>
            <id>copy-resources</id>
            <phase>process-resources</phase>
            <goals>
              <goal>copy-resources</goal>
            </goals>
            <configuration>
              <outputDirectory>${project.build.directory}/jsbuild</outputDirectory>
              <resources>
                <resource>
                  <directory>${project.basedir}/src/main/webapp/build/production/bitfictionMvcTemplate</directory>
                  <includes>
                    <include>**/*</include>
                  </includes>
                </resource>
              </resources>
            </configuration>
          </execution>
        </executions>
      </plugin>
      <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <version>2.4</version>
        <configuration>
          <warSourceExcludes>
            ext/**/*,
            app/**/*,
            sass/**/*,
            *.js,
            *.json,
            *.css,
            *.xml,
            *.rb,
            bootstrap.js
          </warSourceExcludes>
          <outputDirectory>deployments</outputDirectory>
          <warName>ROOT</warName>
        </configuration>
        <executions>
          <execution>
            <id>default-war</id>
            <configuration>
              <webResources>
                <resource>
                  <directory>${project.build.directory}/jsbuild</directory>
                  <targetPath>/</targetPath>
                  <includes>
                    <include>**/*</include>
                  </includes>
                </resource>
              </webResources>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>
</profile>
...

Add required ExtJS files to openshift git repo
Without following files the sencha app build command will throw exceptions such as Cannot satisfy requirements for "ext-theme-neutral", so I recommend to commit and push them into your openshift git repository.

src/main/webapp/.sencha/*
src/main/webapp/ext/packages/ext-theme-neptune/*
src/main/webapp/ext/packages/ext-theme-neutral/*
src/main/webapp/ext/packages/ext-theme-base/*
src/main/webapp/ext/src/*
src/main/webapp/ext/ext-theme-neptune.js
src/main/webapp/ext/ext.js
src/main/webapp/ext/builds/ext-core.js
src/main/webapp/ext/ext-dev.js
src/main/webapp/ext/build.xml
src/main/webapp/ext/cmd/sencha.cfg
src/main/webapp/ext/locale/ext-lang-en.js
src/main/webapp/ext/bootstrap.js

What is your experience with Sencha in cloud? Let me know in comments.

Share this Post: Facebook Twitter Pinterest Google Plus StumbleUpon Reddit RSS Email

Related Posts

Leave a Comment