Flex - Deploy Application

This tutorial will explain you how to create an application war file and how to deploy that in Apache Tomcat Web server root.

If you understood this simple example then you will also be able to deploy a complex Flex application following the same steps.

Let us follow the following steps to create a Flex application −

Follow the steps given below to create a release build of a Flex application and then deploy it to tomcat server −

The first step is to create a release build using Flash Builder IDE. Launch release build wizard using the option File > Export > Flash Builder > Release Build.

Select project as HelloWorld using the wizard window as follows

Leave other default values as such and click Finish Button. Now, Flash Builder will create a bin-release folder containing the project's release build.

Now our release build is ready, let us follow the following steps to deploy a Flex application −

Following is the content of the modified mxml file table table-bordered/com.howcodex/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/howcodex/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center" 
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" 
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe" 
            click = "btnClickMe_clickHandler(event)" styleName = "button" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex - Create Application chapter. If everything is fine with your application, then it will produce the following result: [ Try it online ]

Create WAR File

Now our application is working fine and we are ready to export it as a war file. Follow the following steps −

• Go into your project's bin-release directory C:\workspace\HelloWorld\binrelease

• Select all the files & folders available inside bin-release directory.

• Zip all the selected files & folders in a file called HelloWorld.zip.

• Rename HelloWorld.zip to HelloWorld.war.

Deploy WAR file

Stop the tomcat server.

• Copy the HelloWorld.war file to tomcat installation directory > webapps folder.

• Start the tomcat server.

• Look inside webapps directory, there should be a folder HelloWorld got created.

• Now HelloWorld.war is successfully deployed in Tomcat Webserver root.

Run Application

Enter a URL in web browser −

http://localhost:8080/HelloWorld/HelloWorld.html to launch the application.

Server name (localhost) and port (8080) may vary as per your tomcat configuration.