How to create a maven web project?

To create a Maven Web project, First we need to install Maven Plugin in Eclipse.

Continued..

Now we are pointing to the workspace parallel to .git folder and later we use sourcetree to check-in the project created under this workspace.

Step 1) Mouse Right click and select “New” and choose “Other” and search for Maven and select the “Maven Project”

 

Step 2) Choose “create a simple project” to skip the archetype selection.

Step 3) Provide the group id as “in.com.pradeepit.web” same like java package name to avoid project name collision (Same project names present in different group id) and artifact id as “webportfolio” and it is a web project name.

Step 4) Now right click on pom.xml file and run as “Maven Build” and give goal as “clean package” where clean is for deleting the old project from target folder and package is for create war under target folder.

Step 5) after running the “clean package” , you face an exception as maven ask for mandatory structure required for web project “WEB-INF/web.xml” file

I.Eclipse Exception:

II.Create WEB-INF and web.xml file under WEB-INF folder and run as maven build again for successfully build the application.

Step 6) Go to site http://www.999webtemplates.com/oxygen-free-bootstrap-one-page-template/ for downloading the free responsive HTML template.

 

Step 7) Go to index.html file from template folder and search for Oxygen and change it to “PradeepIT”

Step 10) click F12 from keyboard to get the firebug, In case if you not installed the firebug in browser, Click Here. Now we get a windows to inspect the HTML, CSS, Java script or put the debug in java script/JQuery or you can edit the css on the fly.

Click on element to page to inspect ad mouse over any element to see the respective HTML code and modify from source code. In this example I replaced the team/1.jpg with my profile photo and given the same name i.e. 1.jpg

Now I inspected the below h3 text and paragraph to modify the title & description of profile.

 

Step 11). Similarly inspected the logo and modified the logo with my company logo and kept the original logo as backup for future reference for width and height check.

 

Step 12). Once we done with all the changes we can copy the css, fonts, images, js and html code to webapp folder of maven project.

Step 13) . Add the welcome file, When User hit the application name/ war name we need to show index.html file

 

Step 14 ) we deployed this war in Openshif PaaS Cloud Environment by referring the  “How to deploy war in cloud environment?”  and “How to install tortoisegit and access the Openshift git server code for check-in/check-out?”

Site URL :  http://beta-pradeepit.rhcloud.com/webportfolio/