Front-end (HTML) is not fetching data in spring boot app from mysql database in Microsoft Azure

Question

I am trying to fetch data from MySQL database which is hosted in Microsoft Azure and my spring boot maven app is also deployed in Azure.

When I am hitting my data hosting link, it displays data in JSON format on a web browser. For Example - https://xyz.azurewebsites.net/checklist displays data in JSON format.

On the other end When I am hitting my front-end link, it displays my design. For Example - https://xyz.azurewebsites.net/search.html displays HTML view.

Note - This complete app working fine on local server //localhost/3306. But it is not running fine when I am deploying it on Microsoft Azure. Kind of mismatch issue.

Where am I doing a mistake?

Hierarchy

 |-Project
   |-src/main/java
     |-Controller
     |-DAO
     |-Entity
     |-Main
     |-Repository
     |-Service
     |-src/main/resources
     |-Static
        |- Search.html
        |- Index.html
     |-application.properties

Pom.xml

project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>CheckListMavenWebThree</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>

<!-- <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> 
    <version>1.4.7.RELEASE</version> </parent> -->
<dependencies>

    <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-
boot-starter-web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
        <version>1.4.7.RELEASE</version>
    </dependency>


    <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-jpa -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
        <version>1.4.7.RELEASE</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>6.0.6</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-tomcat</artifactId>
        <version>1.5.6.RELEASE</version>
        <scope>provided</scope>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter</artifactId>
        <version>1.5.6.RELEASE</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.springframework.data/spring-data-envers -->
    <dependency>
        <groupId>org.springframework.data</groupId>
        <artifactId>spring-data-envers</artifactId>
        <version>1.1.6.RELEASE</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-envers -->
    <dependency>
        <groupId>org.hibernate</groupId>
        <artifactId>hibernate-envers</artifactId>
        <version>5.2.10.Final</version>
    </dependency>


</dependencies>

<properties>
    <java.version>1.8</java.version>
</properties>
<build>
    <testSourceDirectory>src/main/test</testSourceDirectory>
    <resources>
        <resource>
            <directory>src/main/resources</directory>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
        <!-- <resource> <directory>src/main/webapp</directory> <excludes> <exclude>**/*.java</exclude> 
            </excludes> </resource> -->
    </resources>
    <plugins>
        <plugin>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.6.1</version>

            <configuration>
                <source>1.8</source>
                <target>1.8</target>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.apache.tomcat.maven</groupId>
            <artifactId>tomcat7-maven-plugin</artifactId>
            <version>7</version>
        </plugin>
        <plugin>
            <artifactId>maven-war-plugin</artifactId>
            <version>3.0.0</version>
        </plugin>
    </plugins>
</build>

Controller.java (able to fetch data on host(Azure))

package com.example.Controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.http.MediaType;

import com.example.Entity.Checklist;
import com.example.Service.CheckListService;

@Controller
public class CheckListController {
@Autowired
private CheckListService checkListService;

@RequestMapping(value = "/checklist" , method = RequestMethod.GET)
@ResponseBody
public Object index() {
    return checkListService.findAll();
}

App.js

var app = angular.module('myApp', [ 'ngResource' ]);
app.controller('CheckListController', [
    '$scope',
    '$resource',
    function($scope, $resource) {
        function fetchAllCheckList() {
            $scope.CheckList = 
$resource('http://localhost:8080/CheckListMavenWebThree/checklist')
                    .query(function(data) {
                        console.log(data);
                        $scope.Message = data;
                        return data;
                    });
        };

        fetchAllCheckList();
        $scope.refresh = function() {
            fetchAllCheckList();
            console.log(fetchAllCheckList());
        };

Search.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>CheckList</title>
<link rel="stylesheet" type="text/css" href="./css/right-panel.css">
</head>

<body ng-app="myApp" onload="javascript:closeNav()">
<div ng-controller="CheckListController" id="main">

<div >

        <span style="font-size: 23px; cursor: pointer"     onclick="openNav()">&#9776;
            Search</span>
    </div>


    <form name="checkListForm" id="main">

        <table border="2" >


            <tr>
                <th>Site_Name</th>
                <th>WSC_Serial_Number</th>
                <th>CheckList_01</th>
                <th>CheckList_02</th>
                <th>CheckList_03</th>
                <th>CheckList_04</th>
                <th>CheckList_05</th>
                <th>CheckList_06</th>
                <th>CheckList_07</th>
                <th>CheckList_08</th>
                <th>CheckList_09</th>
                <th>CheckList_10</th>
                <th>CheckList_11</th>
                <th>CheckList_12</th>
                <th>CheckList_13</th>
                <th>CheckList_14</th>
                <th>Notes</th>
                <th>Completed_By</th>
                <th>Setup_Tech</th>
                <th>Date</th>
            </tr>
            <div><label style="font-size:18px; font-family: "Lato", sans-serif;">Search: <input ng-model="search.$"></label><br><br>
            <tr ng-repeat="row in CheckList  | filter:search:strict">
                <td><span ng-bind="row.site_Name"></span></td>
                <td><span ng-bind="row.wsc_Serial_Number"></span></td>
                <td><span ng-bind="row.checkList_01"></span></td>
                <td><span ng-bind="row.checkList_02"></span></td>
                <td><span ng-bind="row.checkList_03"></span></td>
                <td><span ng-bind="row.checkList_04"></span></td>
                <td><span ng-bind="row.checkList_05"></span></td>
                <td><span ng-bind="row.checkList_06"></span></td>
                <td><span ng-bind="row.checkList_07"></span></td>
                <td><span ng-bind="row.checkList_08"></span></td>
                <td><span ng-bind="row.checkList_09"></span></td>
                <td><span ng-bind="row.checkList_10"></span></td>
                <td><span ng-bind="row.checkList_11"></span></td>
                <td><span ng-bind="row.checkList_12"></span></td>
                <td><span ng-bind="row.checkList_13"></span></td>
                <td><span ng-bind="row.checkList_14"></span></td>
                <td><span ng-bind="row.notes"></span></td>
                <td><span ng-bind="row.completed_By"></span></td>
                <td><span ng-bind="row.setup_Tech"></span></td>
                <td><span ng-bind="row.date"></span></td>
                <td>
            </tr>
        </div>
        </table>

        <div id="mySidenav" class="sidenav" onmouseover="openNav()"
            onmouseleave="closeNav()">
            <!--  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->

            <a href="search.html">&nbsp;&#9906;&nbsp;&nbsp;Search</a> <a
                href="createnew.html">&#169;&nbsp;&nbsp;Create</a> <a href="update.html">&#9851;&nbsp;&nbsp;Update</a>
            <a href="delete.html">&#9762;&nbsp;&nbsp;Delete</a>
            <a href="earth.html">&#9762;&nbsp;&nbsp;Earth</a>
        </div>

        <span><button type="button" data-ng-click="refresh()" id="refresh">Refresh</button></span>
</div>
</form>
<script type='text/javascript'  src="./js/rightpanel.js"></script>
<script type='text/javascript'  src="./js/angular.min.js"></script>
<script type='text/javascript'  src="./js/angular-resource.min.js"></script>
<script type='text/javascript' src="js/app.js"></script>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/theme-default.css">
<link rel="stylesheet" href="./css/theme-blue.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">

Web.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<handlers>
  <add name="httpPlatformHandler" path="*" verb="*" 
modules="httpPlatformHandler" resourceType="Unspecified" />
</handlers>
<httpPlatform processPath="%JAVA_HOME%\bin\java.exe"
    arguments="-Djava.net.preferIPv4Stack=true -
Dserver.port=%HTTP_PLATFORM_PORT% -jar &quot;%HOME%\site\wwwroot\gs-spring-
boot-0.1.0.jar&quot;">
</httpPlatform>
</system.webServer>
</configuration>

Application.properties (I am naive so I just learned and tried to implement. Is application.properties is correct? It allow me to connect mysql with azure from local host also)

spring.mvc.view.prefix=/static/js/
spring.mvc.view.suffix=.jsp
spring.datasource.url=jdbc:mysql://*****.mysql.database.azure.com:3306/*****?    verifyServerCertificate=true&useSSL=true&requireSSL=false&serverTimezone=UTC
spring.datasource.username:*******@*******server
spring.datasource.password:*******
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver


# Keep the connection alive if idle for a long time (needed in production)
spring.datasource.testWhileIdle = true
spring.datasource.validationQuery = SELECT 1

# Show or not log for each sql query
spring.jpa.show-sql = true

# Hibernate ddl auto (create, create-drop, update)
spring.jpa.hibernate.ddl-auto = update

# Naming strategy
spring.jpa.hibernate.naming-strategy =     org.hibernate.cfg.ImprovedNamingStrategy

# Use spring.jpa.properties.* for Hibernate native properties (the prefix is
# stripped before adding them to the entity manager)

# The SQL dialect makes Hibernate generate better SQL for the chosen     database
spring.jpa.properties.hibernate.dialect =     org.hibernate.dialect.MySQL5Dialect
logging.level.org.hibernate.SQL:debug

#naming convention according to me
spring.jpa.hibernate.naming.physical-    strategy=org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl

What stuff Am I doing wrong? Is that hosting link issue?

Answer 1

According to your description, your project works fine locally, so consider the issue of deployment.

You could followed the official tutorials to deploy spring-boot project to azure.

Combining the steps in the official tutorials and your actual situation, I provide the following check points:

Point 1: Please use mvn package to bulid the JAR package in the directory under which the pom.xml file is located.

]

Point 2: Please make sure that the jar package name configured in web.config is the same as the uploaded jar package name.

Point 3: Please use FTP to publish jar files and web.config to D:\\home\\site\\wwwroot\\ directory on KUDU.

Point 4: Please make sure ApplicationSettings matches your project such as jdk version , tomcat version .

If you want to deploy a war file, you need to configure the ApplicationSettings of your app service on Azure portal, then upload the war file into the path D:\\home\\site\\wwwroot\\webapps .

As references, please refer to the documents and threads below.

1. Configure web apps in Azure App Service

2. Create a Java web app in Azure App Service

3. Deploying Springboot to Azure App Service .

Hope it helps you.