Categories: Web

Template – HTML5 BoilerPlate with Spring MVC & GAE

This article provides instructions on how to create your quick Google App Engine (GAE) based web application project using Eclipse IDE, based on Spring MVC and HTML5Boilerplate (or Initializr) HTML project templates. Note that this is my personal way to get started quickly with any GAE-based web projects within 5 minutes or so and upload the same on Google cloud. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.
Following are key points described later in this article:
  • Create HTML template projects using Initializr
  • Create Google App Engine/Spring MVC template project
  • Create Google Web Application project & Import Files

 

Create HTML template projects using Initializr

Recently, I found an online web project, Initializr which is very useful to quickly download a template HTML project of the following types and, get started with a static web project within minutes.

  • HTML5 Boilerplate
  • Responsive
  • Bootstrap

All that one need to do is go to Initializr.com, select a template type and download the HTML template project. In fact, the Initialzr project (GAE based) itself is an open-source and could be downloaded from GitHub. I downloaded it and ran locally on my laptop. I was able to create the template project locally, without going to Initializr.com.

 

Create Google App Engine/Spring MVC template project

Create a GAE/Spring MVC template consisting of folders and files that could be imported into new GAE web application project. Note that this is a one-time activity. This project is primarily a folder consisting of following two folders with below-mentioned files:

  • src folder: Create a package com.vflux.core (com/vflux/core) within src folder and place an HelloController.java file within it. Following is the source code for the file:
    package com.vflux.core;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.ModelMap;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.servlet.ModelAndView;
    
    @Controller
    public class HelloController {
     
     @RequestMapping(value = "/", method = RequestMethod.GET)
     public ModelAndView index( ModelMap model ) {
      return new ModelAndView("index");
     } 
    }
    
  • war folder: Create a WEB-INF folder within and place following as files/folders within. Note that these folders & files shall be imported into GAE project while working from eclipse IDE.
    • lib: Place Spring MVC related libraries along with any related libraries
    • views: index.jsp file will go within this folder. Note that index.jsp is the index.html file that gets created as part of Initializr.
    • spring-servlet.xml: Following is the content of the file:
      <beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
              http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd        
              http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
              http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd">
      
       
       <context:component-scan base-package="com.vflux.core" /> 
       <mvc:annotation-driven />
       <!--  Configuration defining views files -->
       
       <bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix">
         <value>/WEB-INF/views/</value>
        </property>
        <property name="suffix">
         <value>.jsp</value>
        </property>
       </bean> 
      </beans>
      
    • web.xml whose content goes like following:
      <?xml version="1.0" encoding="UTF-8"?>
      <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
               xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
                    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
               version="2.5"
               xmlns="http://java.sun.com/xml/ns/javaee">
        
        <servlet>
        <servlet-name>spring</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
       </servlet>
       <servlet-mapping>
        <servlet-name>spring</servlet-name>
        <url-pattern>/</url-pattern>
       </servlet-mapping>
       <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>
         /WEB-INF/spring-servlet.xml
        </param-value>
       </context-param>
       <listener>
        <listener-class>
         org.springframework.web.context.ContextLoaderListener
        </listener-class>
       </listener>
        
        <!-- Default page to serve -->
        <welcome-file-list>
          <welcome-file>index.jsp</welcome-file>
        </welcome-file-list>
      
      </web-app>
      

 

Create Google Web Application project & Import Files

These step need to be done for every new project.

  • Create a Google Web Application project within Eclipse IDE. This would create folders such as src, war, war/WEB-INF etc.
  • Create a “views” folder within “war/WEB-INF”. This folder would consist of index.jsp. Note that the index.jsp file is actually index.html (renamed as index.jsp) created as part of HTML template project.
  • Click on “war” folder and import all folders and files created/downloaded as HTML template project from Initializr.com. It imports folders such as css, js, img, fonts (optionally) and files such as robots.txt, favicon.ico, index.html etc. Rename index.html as index.jsp and move it into “war/WEB-INF/views” folder.
  • Click on “war/WEB-INF/lib” folder and import Spring libraries that you stored as part of GAE template project described above under the section, Create Google App Engine/Spring MVC template project.
  • Create a package com.vflux.core within “src” folder and import HelloController.java that you created as part of GAE template project described above under the section, Create Google App Engine/Spring MVC template project.

That is it! Once done with above, go ahead and right-click on the project and click on “Run as/Web Application”

 

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Share
Published by
Ajitesh Kumar

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

3 weeks ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

4 weeks ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

1 month ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

1 month ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

1 month ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

1 month ago