{{announcement.body}}
{{announcement.title}}

Website Hosting with MuleSoft API

DZone 's Guide to

Website Hosting with MuleSoft API

In this article, I will give you a scenario of how to package website pages inside a MuleSoft application and deploy it to Anypoint Platform or Cloudhub

· Integration Zone ·
Free Resource

Introduction

One of the interesting features of MuleSoft is that we can use a MuleSoft application to package and host website content. We package our website pages inside a MuleSoft application and deploy it to Anypoint Platform or Cloudhub and our website is published and accessible to the end-users. In this article, I will give you an example scenario of how it’s done so, you can use it for your own needs.

Imagine you are doing file transfers with MuleSoft and your target location is not always accessible. You have an option to move files in a temporary location and retry at a later point in time. While you can automate all of this, sometimes your customers would like a little bit more flexibility and control around retrying and clear visibility into what has not been yet transferred successfully.

You can create a simple web page that lists all of the files that are not transferred successfully with details such as name, size, date, etc. You can then be creative with your HTML and features to give your customer the best experience. For example: option to retry one, multiple, or all of the files from the temporary location through this web page.

This will be really useful for customers who want a simple solution without maintaining servers such as tomcat or apache to run the web application, who want a web application to present data from Mule integration application. The data could be presented to some users that should be able to get or update a few fields in their datasets.

MULE COVID-19 -API  front end page 



To create a web page with bootstrap css template below steps has been followed

prerequisite:-

  • Mule 4
  • Java 1.8
  • Any point Studio 7.xx
  • Any bootstrap template

Step 1:- 

Create a new Mulesoft application in Anypoint Studio. Then, create new folders under src/main/resources
and call it for example “web.css”,"web.js" etc. Drop all your website files in there: HTML, js, CSS as shown below.

Step 2:- 

Get live data from other source Google, any covid website etc.

In the main flow XML  you need to load your static resources. For this, we need one HTTP Listener and one HTTP Load Static Resource handler, file writer for write .html file. 

The flow reference is used to get some html payload from other resource of this api, which is merged into main page at the transform Message-HTML-PAGE to display the live data in the main page.

 

Please note:- In this website, I am having multiple multiple pages/css resources  are loaded into main page, so the HTTP listener has to be resources the path  /*

Main Flow

I am using Google covid-19 update page  and other multiple websites to get live data from their websites.
XML payload from other resource
XML
 




x
40


1
<div class="centered">
2
  <div>
3
    <table>
4
      <tr>
5
        <td style="color:Red;">WORLD-LIVE</td>
6
      </tr>
7
      <tr>
8
        <th>Total</th>
9
        <th>22,865,932 </th>
10
      </tr>
11
      <tr>
12
        <td>Death</td>
13
        <td>797,158</td>
14
      </tr>
15
      <tr>
16
        <td>Recover</td>
17
        <td>15,520,570</td>
18
      </tr>
19
    </table>
20
  </div>
21
  <div>
22
    <table>
23
      <tr>
24
        <td style="color:Red;">INDIA LIVE</td>
25
      </tr>
26
      <tr>
27
        <th>Total</th>
28
        <th>2,906,584 </th>
29
      </tr>
30
      <tr>
31
        <td>Death</td>
32
        <td>54,987</td>
33
      </tr>
34
      <tr>
35
        <td>Recover</td>
36
        <td>2,159,808</td>
37
      </tr>
38
    </table>
39
  </div>
40
</div>



Data weave code to generate above xml. (Internally reads live data from google pages.)
Plain Text
 




xxxxxxxxxx
1
72


1
%dw 2.0
2
 
           
3
output application/xml writeDeclaration=false
4
---
5
{
6
    "root":{
7
        "div": [
8
            {
9
                "table": {
10
                    "tr": [
11
                        {
12
                            "td" @(style:"color:Red;"):{
13
           
14
              "__text": "WORLD-LIVE"
15
            }
16
                        },
17
                        {
18
                            "th": [
19
                                "Total",
20
                                vars.worldtotalinfected
21
                            ]
22
                        },
23
                        {
24
                            "td": [
25
                                "Death",
26
                                vars.worlddeaths
27
                            ]
28
                        },
29
                        {
30
                            "td": [
31
                                "Recover",
32
                                vars.worldrecovered
33
                            ]
34
                        }
35
                    ]
36
                },
37
                
38
            },
39
            {
40
                "table": {
41
                    "tr": [
42
                        {
43
                            "td" @(style:"color:Red;"): {
44
           
45
              "__text": "INDIA LIVE"
46
            }
47
                        },
48
                        {
49
                            "th": [
50
                                "Total",
51
                                vars.indtotalinfected
52
                            ]
53
                        },
54
                        {
55
                            "td": [
56
                                "Death",
57
                                vars.inddeaths
58
                            ]
59
                        },
60
                        {
61
                            "td": [
62
                                "Recover",
63
                                vars.indrecovered
64
                            ]
65
                        }
66
                    ]
67
                },
68
                
69
            }
70
        ]
71
    }
72
}


Transform Message to load main html page, which concatenate above xml payload for live data and to refer all css template classes.
Plain Text
 




xxxxxxxxxx
1
520


1
%dw 2.0
2
output application/java
3
---
4
{op:
5
    '<!DOCTYPE html>
6
<html lang="en">
7
    <head>
8
        <meta charset="utf-8">
9
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
10
        <meta name="description" content="">
11
        <meta name="author" content="">
12
     
13
        <!-- Font Awesome icons (free version)-->
14
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" crossorigin="anonymous"></script>
15
        <!-- Core theme CSS (includes Bootstrap)-->
16
        <link href="css/styles.css" rel="stylesheet">
17
        <!-- Fonts CSS-->
18
        <link rel="stylesheet" href="css/heading.css">
19
        <link rel="stylesheet" href="css/body.css">
20
    </head>
21
    <body id="page-top">
22
        <nav class="navbar navbar-expand-lg bg-secondary fixed-top" id="mainNav">
23
            <div class="container"><a class="navbar-brand js-scroll-trigger" href="#page-top">COVID-19 LATEST UPDATES-MULE</a>
24
                <button class="navbar-toggler navbar-toggler-right font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu <i class="fas fa-bars"></i></button>
25
                <div class="collapse navbar-collapse" id="navbarResponsive">
26
                    <ul class="navbar-nav ml-auto">
27
                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#portfolio">UPDATES</a>
28
                        </li>
29
                          <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#downloads">DOWNLOADS</a>
30
                        </li>
31
                    
32
                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">ABOUT</a>
33
                        </li>
34
                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">CONTACT</a>
35
                        </li>
36
                    </ul>
37
                </div>
38
            </div>
39
        </nav>
40
        <header class="masthead bg-primary text-white text-center">
41
            <div class="container d-flex align-items-center flex-column">
42
                <!-- Masthead Avatar Image-->
43
                <!-- Masthead Heading-->
44
                <h1 class="masthead-heading mb-0">COVID-19 API</h1>
45
                <!-- Icon Divider-->
46
                <div class="divider-custom divider-light">
47
                    <div class="divider-custom-line">
48
                    </div>                  
49
                    <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
50
                    <div class="divider-custom-line"></div>
51
                </div>
52
                <!-- Masthead Subheading-->'
53
          
54
 ++ payload ++ '</div>
55
            
56
            
57
        </header>
58
        <section class="page-section portfolio" id="portfolio">
59
            <div class="container">
60
                <!-- Portfolio Section Heading-->
61
                <div class="text-center">
62
                    <h2 class="page-section-heading text-secondary mb-0 d-inline-block">LATEST UPDATES</h2>
63
                </div>
64
                <!-- Icon Divider-->
65
                <div class="divider-custom">
66
                    <div class="divider-custom-line"></div>
67
                    <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
68
                    <div class="divider-custom-line"></div>
69
                </div>
70
                <!-- Portfolio Grid Items-->
71
                <div class="row justify-content-center">
72
                
73
                
74
                    <!-- Portfolio Items-->
75
                    <div class="col-md-6 col-lg-4 mb-5">
76
                        <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal0">
77
                            <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
78
                                <div class="portfolio-item-caption-content text-center text-white">
79
                                 <a class="w3-right w3-btn" href="/breaking">Vaccine News</span>                              
80
                                <img class="img-fluid" src="assets/img/portfolio/vaccines.jpg"/>                        
81
                                </div>
82
                            </div><img class="img-fluid" src="assets/img/portfolio/vaccines.jpg"/>
83
                        </div>
84
                    </div>
85
                    
86
                    
87
                    
88
                    <div class="col-md-6 col-lg-4 mb-5">
89
                        <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal0">
90
                            <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
91
                                <div class="portfolio-item-caption-content text-center text-white">
92
                                 <a class="w3-right w3-btn" href="/worlddata">WORLD COVID-19 DATA</span>                    
93
                                 <a class="w3-right w3-btn" href="/worlddata">WORLD COVID-19 DATA</span>                    
94
                                <img class="img-fluid" src="assets/img/portfolio/world.jpg"/>                           
95
                                </div>
96
                            </div><img class="img-fluid" src="assets/img/portfolio/world.jpg"/>
97
                        </div>
98
                    </div>
99
                    
100
                    
101
                    <div class="col-md-6 col-lg-4 mb-5">
102
                        <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal0">
103
                            <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
104
                                <div class="portfolio-item-caption-content text-center text-white">                     
105
                                 <a class="w3-right w3-btn" href="/datain">INDIA COVID-19 DATA</span>                                 
106
                                <img class="img-fluid" src="assets/img/portfolio/India.jpg"/>                           
107
                                </div>
108
                            </div><img class="img-fluid" src="assets/img/portfolio/India.jpg"/>
109
                        </div>
110
                    </div>
111
                    
112
                    
113
                        <div class="col-md-6 col-lg-4 mb-5">
114
                        <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal0">
115
                            <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
116
                                <div class="portfolio-item-caption-content text-center text-white">                     
117
                                 <a class="w3-right w3-btn" href="/mail?">ICMR DATA</span>                                
118
                                <img class="img-fluid" src="assets/img/portfolio/icmr.jpg"/>                                
119
                                </div>
120
                            </div><img class="img-fluid" src="assets/img/portfolio/icmr.jpg"/>
121
                        </div>
122
                    </div>
123
                    
124
                    
125
                            <div class="col-md-6 col-lg-4 mb-5">
126
                        <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal0">
127
                            <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
128
                                <div class="portfolio-item-caption-content text-center text-white">                     
129
                                 <a class="w3-right w3-btn" href="/data">LIVE DATA</span>                                 
130
                                <img class="img-fluid" src="assets/img/portfolio/live.png"/>                                
131
                                </div>
132
                            </div><img class="img-fluid" src="assets/img/portfolio/live.png"/>
133
                        </div>
134
                    </div>
135
                    
136
                    
137
                        <div class="col-md-6 col-lg-4 mb-5">
138
                        <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal0">
139
                            <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
140
                                <div class="portfolio-item-caption-content text-center text-white">                     
141
                                 <a class="w3-right w3-btn" href="/main">GET COVID MAIL</span>                                
142
                                <img class="img-fluid" src="assets/img/portfolio/mail.jpg"/>                                
143
                                </div>
144
                            </div><img class="img-fluid" src="assets/img/portfolio/mail.jpg"/>
145
                        </div>
146
                    </div>
147
                    
148
                   </section>   
149
                    
150
                    
151
                    
152
                   
153
            
154
     
155
        <!-- Portfolio Modal-->
156
        <div class="portfolio-modal modal fade" id="portfolioModal0" tabindex="-1" role="dialog" aria-labelledby="#portfolioModal0Label" aria-hidden="true">
157
            <div class="modal-dialog modal-xl" role="document">
158
                <div class="modal-content">
159
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fas fa-times"></i></span></button>
160
                    <div class="modal-body text-center">
161
                        <div class="container">
162
                            <div class="row justify-content-center">
163
                                <div class="col-lg-8">
164
                                    <!-- Portfolio Modal - Title-->
165
                                    <h2 class="portfolio-modal-title text-secondary mb-0">Calling REST API</h2>
166
                                    <!-- Icon Divider-->
167
                                    <div class="divider-custom">
168
                                        <div class="divider-custom-line"></div>
169
                                        <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
170
                                        <div class="divider-custom-line"></div>
171
                                    </div>
172
                                    <!-- Portfolio Modal - Image--><img class="img-fluid rounded mb-5" src="assets/img/portfolio/mule.png" />
173
                                    <!-- Portfolio Modal - Text-->
174
                                    <p class="mb-5"></p>
175
                                    <button class="btn btn-primary" href="#" data-dismiss="modal"><i class="fas fa-times fa-fw"></i>Close Window</button>
176
                                </div>
177
                            </div>
178
                        </div>
179
                    </div>
180
                </div>
181
            </div>
182
        </div>
183
        <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-labelledby="#portfolioModal1Label" aria-hidden="true">
184
            <div class="modal-dialog modal-xl" role="document">
185
                <div class="modal-content">
186
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fas fa-times"></i></span></button>
187
                    <div class="modal-body text-center">
188
                        <div class="container">
189
                            <div class="row justify-content-center">
190
                                <div class="col-lg-8">
191
                                    <!-- Portfolio Modal - Title-->
192
                                    <h2 class="portfolio-modal-title text-secondary mb-0">Tasty Cake</h2>
193
                                    <!-- Icon Divider-->
194
                                    <div class="divider-custom">
195
                                        <div class="divider-custom-line"></div>
196
                                        <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
197
                                        <div class="divider-custom-line"></div>
198
                                    </div>
199
                                    <!-- Portfolio Modal - Image--><img class="img-fluid rounded mb-5" src="assets/img/portfolio/cake.png" alt="Tasty Cake"/>
200
                                    <!-- Portfolio Modal - Text-->
201
                                    <p class="mb-5"></p>
202
                                    <button class="btn btn-primary" href="#" data-dismiss="modal"><i class="fas fa-times fa-fw"></i>Close Window</button>
203
                                </div>
204
                            </div>
205
                        </div>
206
                    </div>
207
                </div>
208
            </div>
209
        </div>
210
        <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-labelledby="#portfolioModal2Label" aria-hidden="true">
211
            <div class="modal-dialog modal-xl" role="document">
212
                <div class="modal-content">
213
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fas fa-times"></i></span></button>
214
                    <div class="modal-body text-center">
215
                        <div class="container">
216
                            <div class="row justify-content-center">
217
                                <div class="col-lg-8">
218
                                    <!-- Portfolio Modal - Title-->
219
                                    <h2 class="portfolio-modal-title text-secondary mb-0">Circus Tent</h2>
220
                                    <!-- Icon Divider-->
221
                                    <div class="divider-custom">
222
                                        <div class="divider-custom-line"></div>
223
                                        <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
224
                                        <div class="divider-custom-line"></div>
225
                                    </div>
226
                                    <!-- Portfolio Modal - Image--><img class="img-fluid rounded mb-5" src="assets/img/portfolio/circus.png" alt="Circus Tent"/>
227
                                    <!-- Portfolio Modal - Text-->
228
                                    <p class="mb-5"></p>
229
                                    <button class="btn btn-primary" href="#" data-dismiss="modal"><i class="fas fa-times fa-fw"></i>Close Window</button>
230
                                </div>
231
                            </div>
232
                        </div>
233
                    </div>
234
                </div>
235
            </div>
236
        </div>
237
        <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-labelledby="#portfolioModal3Label" aria-hidden="true">
238
            <div class="modal-dialog modal-xl" role="document">
239
                <div class="modal-content">
240
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fas fa-times"></i></span></button>
241
                    <div class="modal-body text-center">
242
                        <div class="container">
243
                            <div class="row justify-content-center">
244
                                <div class="col-lg-8">
245
                                    <!-- Portfolio Modal - Title-->
246
                                    <h2 class="portfolio-modal-title text-secondary mb-0">Controller</h2>
247
                                    <!-- Icon Divider-->
248
                                    <div class="divider-custom">
249
                                        <div class="divider-custom-line"></div>
250
                                        <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
251
                                        <div class="divider-custom-line"></div>
252
                                    </div>
253
                                    <!-- Portfolio Modal - Image--><img class="img-fluid rounded mb-5" src="assets/img/portfolio/game.png" alt="Controller"/>
254
                                    <!-- Portfolio Modal - Text-->
255
                                    <p class="mb-5"></p>
256
                                    <button class="btn btn-primary" href="#" data-dismiss="modal"><i class="fas fa-times fa-fw"></i>Close Window</button>
257
                                </div>
258
                            </div>
259
                        </div>
260
                    </div>
261
                </div>
262
            </div>
263
        </div>
264
        <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-labelledby="#portfolioModal4Label" aria-hidden="true">
265
            <div class="modal-dialog modal-xl" role="document">
266
                <div class="modal-content">
267
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fas fa-times"></i></span></button>
268
                    <div class="modal-body text-center">
269
                        <div class="container">
270
                            <div class="row justify-content-center">
271
                                <div class="col-lg-8">
272
                                    <!-- Portfolio Modal - Title-->
273
                                    <h2 class="portfolio-modal-title text-secondary mb-0">Locked Safe</h2>
274
                                    <!-- Icon Divider-->
275
                                    <div class="divider-custom">
276
                                        <div class="divider-custom-line"></div>
277
                                        <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
278
                                        <div class="divider-custom-line"></div>
279
                                    </div>
280
                                    <!-- Portfolio Modal - Image--><img class="img-fluid rounded mb-5" src="assets/img/portfolio/safe.png" alt="Locked Safe"/>
281
                                    <!-- Portfolio Modal - Text-->
282
                                    <p class="mb-5"></p>
283
                                    <button class="btn btn-primary" href="#" data-dismiss="modal"><i class="fas fa-times fa-fw"></i>Close Window</button>
284
                                </div>
285
                            </div>
286
                        </div>
287
                    </div>
288
                </div>
289
            </div>
290
        </div>
291
        <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-labelledby="#portfolioModal5Label" aria-hidden="true">
292
            <div class="modal-dialog modal-xl" role="document">
293
                <div class="modal-content">
294
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fas fa-times"></i></span></button>
295
                    <div class="modal-body text-center">
296
                        <div class="container">
297
                            <div class="row justify-content-center">
298
                                <div class="col-lg-8">
299
                                    <!-- Portfolio Modal - Title-->
300
                                    <h2 class="portfolio-modal-title text-secondary mb-0">Submarine</h2>
301
                                    <!-- Icon Divider-->
302
                                    <div class="divider-custom">
303
                                        <div class="divider-custom-line"></div>
304
                                        <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
305
                                        <div class="divider-custom-line"></div>
306
                                    </div>
307
                                    <!-- Portfolio Modal - Image--><img class="img-fluid rounded mb-5" src="assets/img/portfolio/submarine.png" alt="Submarine"/>
308
                                    <!-- Portfolio Modal - Text-->
309
                                    <p class="mb-5"></p>
310
                                    <button class="btn btn-primary" href="#" data-dismiss="modal"><i class="fas fa-times fa-fw"></i>Close Window</button>
311
                                </div>
312
                            </div>
313
                        </div>
314
                    </div>
315
                </div>
316
            </div>
317
        </div>
318
       
319
        
320
             <section class="page-section bg-primary text-white mb-0" id="downloads">
321
            <div class="container">
322
                <!-- About Section Heading-->
323
           
324
                
325
                <div class="text-center">
326
                    <h2 class="page-section-heading d-inline-block text-white">DOWNLOADS</h2>
327
                </div>
328
                <!-- Icon Divider-->
329
                <div class="divider-custom divider-light">
330
                    <div class="divider-custom-line"></div>
331
                    <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
332
                    <div class="divider-custom-line"></div>
333
                </div>
334
                <!-- About Section Content-->
335
                <div class="row">
336
                
337
                     <div class="col-lg-4 ml-auto">
338
                       <a href="/breaking/pdf" download>
339
                        <p class="pre-wrap lead">BREAKING NEWS</p>
340
                        <img class="img-fluid" src="assets/img/portfolio/pdfvaccine.png"/>
341
                         </div>
342
                          
343
                      <div class="col-lg-4 mr-auto">
344
                      <a class="w3-right w3-btn" href="/world/pdf">
345
                        <p class="pre-wrap lead">WORLD DATA</p>
346
                        <img class="img-fluid" src="assets/img/portfolio/pdfworld.png"/>    
347
                         </div>
348
                    
349
                      <div class="col-lg-4 mr-auto">
350
                      <a class="w3-right w3-btn" href="/datain/pdf">
351
                        <p class="pre-wrap lead">INDIA DATA</p>
352
                        <img class="img-fluid" src="assets/img/portfolio/pdfindia.png"/>    
353
                       </div>
354
                       
355
                        <div class="col-lg-4 mr-auto">
356
                         <a class="w3-right w3-btn" href="/data/pdf">">
357
                        <p class="pre-wrap lead">LIVE DATA</p>
358
                        <img class="img-fluid" src="assets/img/portfolio/pdflive.png"/>                         
359
                    </div>
360
                       
361
                        <div class="col-lg-4 mr-auto">
362
                         <a class="w3-right w3-btn" href="/mail/pdf">
363
                        <p class="pre-wrap lead">ICMR REPORT</p>
364
                        <img class="img-fluid" src="assets/img/portfolio/pdficmr.png"/>                         
365
                    </div>
366
                </div>
367
            </div>
368
        </section>
369
 
           
370
 
           
371
 
           
372
 
           
373
 
           
374
 
           
375
 
           
376
 
           
377
<iframe width="420" height="315"
378
src="https://www.youtube.com/embed/YwhL98NiCcc">
379
</iframe>
380
 
           
381
<iframe width="420" height="315"
382
src="https://www.youtube.com/embed/mq6TfBLoyhA">
383
</iframe>
384
<iframe width="420" height="315"
385
src="https://www.youtube.com/embed/6NhpASEB20w">
386
</iframe>
387
<iframe width="420" height="315"
388
src="https://www.youtube.com/embed/NIm9vIkbbjI">
389
</iframe>
390
 
           
391
 
           
392
 
           
393
 
           
394
 
           
395
 
           
396
         <section class="page-section bg-primary text-white mb-0" id="about">
397
            <div class="container">
398
                <!-- About Section Heading-->
399
                <div class="text-center">
400
                    <h2 class="page-section-heading d-inline-block text-white">ABOUT</h2>
401
                </div>
402
                   <div class="col-lg-4">
403
                        <h4 class="mb-4">ABOUT THIS APP</h4>
404
                        <p class="pre-wrap lead mb-0">This APP is MuleSoft API, which is running on mulesoft cloudhub  platform which is working as web server, to provide all COVID-19 updates on single point by using 16 mulesoft restful APIs internally.</p></br>
405
                        <p class="pre-wrap lead mb-0">Vaccine News api:- This API used to get latest breaking news about covid-19 vaccinations, which is a search api, using few predefined and uuid key words searching on different webs, and giving response in html page with Headlines Tab and Reported By tab in a table format.
406
                        </p>
407
                        <p class="pre-wrap lead mb-0">World Data and India Data API:- This  API are used to get latest status from different web sites and giving response in html page with Headlines Tab and Reported By tab in a table format.
408
                        </p>    
409
                        <p class="pre-wrap lead mb-0">ICMR Data API:- This  API  used to get latest status from ICMR, and shows Statewise result in html format.
410
                        </p>
411
                        <p class="pre-wrap lead mb-0">Download services API:- This  APIs are converting html page to pdf format and enables download, internally it is calling to pdf converter API.
412
                        </p>    
413
                       <p class="pre-wrap lead mb-0">Mailing services API:- This  API is integrated with SMTP Server to get ICMR data on email.
414
                        </p>
415
                       <p class="pre-wrap lead mb-0">Live Data sheet API:- This  API will provide live data sheet from world meter as html tables.
416
                        </p>    
417
                       <p class="pre-wrap lead mb-0">I Con Live:- This  API will provide live world data and Live India data on main page API.  
418
                        </p>
419
                        <p class="pre-wrap lead mb-0">Send Document:- This  API  provides service to handling file attachments  as  multipart/form-data format. 
420
                        </p>                        
421
                       <p class="pre-wrap lead mb-0">Previous version:- This  API also  provide same service without CSS Templates.
422
                        </p>                    
423
                    </div> 
424
                    
425
                    
426
     <div class="text-center">
427
   <h2 class="page-section-heading d-inline-block text-White">Send document to us</h2>
428
  <div> <form action="/file" method="post" enctype="multipart/form-data">
429
  <input type="file" name="fileToUpload" id="fileToUpload">
430
  <input type="submit" value="Upload" name="submit">
431
</form> </div>                  
432
                        
433
                    
434
                <!-- Icon Divider-->
435
                <div class="divider-custom divider-light">
436
                    <div class="divider-custom-line"></div>
437
                    <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
438
                    <div class="divider-custom-line"></div>
439
                </div>
440
                <!-- About Section Content-->
441
                <div class="row">
442
               
443
                </div>
444
            </div>
445
            
446
                
447
            
448
            
449
        </section>
450
        
451
        <div class="text-center">
452
                  <a class="w3-right w3-btn" href="/main">
453
                        <p class="pre-wrap lead"><b>Previous Version</b></p>
454
                </div>
455
              </div>        
456
                    </div>
457
        
458
        <section class="page-section" id="contact">
459
            <div class="container">
460
                <!-- Contact Section Heading-->
461
                <div class="text-center">
462
                    <h2 class="page-section-heading text-secondary d-inline-block mb-0">CONTACT</h2>
463
                </div>
464
                <!-- Icon Divider-->
465
                <div class="divider-custom">
466
                    <div class="divider-custom-line"></div>
467
                    <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
468
                    <div class="divider-custom-line"></div>
469
                </div>
470
                <!-- Contact Section Content-->
471
                <div class="row justify-content-center">
472
                    <div class="col-lg-4">
473
                        <div class="d-flex flex-column align-items-center">
474
                            <div class="icon-contact mb-3"><i class="far fa-envelope"></i></div>
475
                            <div class="text-muted">Email </div><a class="lead font-weight-bold" href="mailto:guruprasad.malenki@gmail.com">guruprasad.malenki@gmail.com</a>
476
                        </div>
477
                    </div>
478
                </div>
479
            </div>
480
        </section>
481
        <footer class="footer text-center">
482
            <div class="container">
483
                <div class="row">
484
                    <!-- Footer Location-->
485
                    <div class="col-lg-4 mb-5 mb-lg-0">
486
                        <h4 class="mb-4">LOCATION</h4>
487
                        <p class="pre-wrap lead mb-0">BENGALURU</p>
488
                    </div>
489
                    <!-- Footer Social Icons-->
490
                    <div class="col-lg-4 mb-5 mb-lg-0">
491
                        <h4 class="mb-4">AROUND THE WEB</h4>
492
                    </div>
493
                    <!-- Footer About Text-->
494
                    <div class="col-lg-4">
495
                        <h4 class="mb-4">GURUPRASAD MALENKI</h4>
496
                        <p class="pre-wrap lead mb-0">MICRO SERVICES | RAML | RESTFUL API| NODE JS | MULE SOFT | CONNECTORS | TIBCO | SOAP WEB SERVICES</p>
497
                    </div>
498
                </div>
499
            </div>
500
        </footer>
501
        <!-- Copyright Section-->
502
        <section class="copyright py-4 text-center text-white">
503
            <div class="container"><small class="pre-wrap">Copyright</small></div>
504
        </section>
505
        <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes)-->
506
        <div class="scroll-to-top d-lg-none position-fixed"><a class="js-scroll-trigger d-block text-center text-white rounded" href="#page-top"><i class="fa fa-chevron-up"></i></a></div>
507
        <!-- Bootstrap core JS-->
508
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
509
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
510
        <!-- Third party plugin JS-->
511
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
512
        <!-- Contact form JS-->
513
        <script src="assets/mail/jqBootstrapValidation.js"></script>
514
        <script src="assets/mail/contact_me.js"></script>
515
        <!-- Core theme JS-->
516
        <script src="js/scripts.js"></script>
517
    </body>
518
</html>'
519
    
520
}



Step 3:-

Write The above payload into  html file






Step 4:-

Finally loading http static page using Http Static resource


Here is my COVID-19 API with all navigation to other web pages:

 

Breaking news page after navigation:-

ABOUT THIS APPLICATION

This APP is MuleSoft API, which is running on mulesoft cloudhub  platform which is working as web server, to provide all COVID-19 updates on single point by using 16 mulesoft restful APIs internally.

Vaccine News api:- This API used to get latest breaking news about covid-19 vaccinations, which is a search api, using few predefined and uuid key words searching on different webs, and giving response in html page with Headlines Tab and Reported By tab in a table format.

http://mule-covid-app-guru1.us-e2.cloudhub.io/breaking

World Data and India Data API:- This  API are used to get latest status from different web sites and giving response in html page with Headlines Tab and Reported By tab in a table format.

http://mule-covid-app-guru1.us-e2.cloudhub.io/worlddata

http://mule-covid-app-guru1.us-e2.cloudhub.io/datain

ICMR Data API:- This  API  used to get latest status from ICMR, and shows State wise result in html format.

http://mule-covid-app-guru1.us-e2.cloudhub.io/data

Download services API:- This  APIs are converting html page to pdf format and enables download, internally it is calling to pdf converter API.

http://mule-covid-app-guru1.us-e2.cloudhub.io/mail/pdf

Mailing services API:- This  API is integrated with SMTP Server to get ICMR data on email.

http://mule-covid-app-guru1.us-e2.cloudhub.io/mail?fname=xxxx.gmail.com

Live Data sheet API:- This  API will provide live data sheet from world meter as html tables.

http://mule-covid-app-guru1.us-e2.cloudhub.io/data

I Con Live:- This  API will provide live world data and Live India data on main page API.           

http://mule-covid-app-guru1.us-e2.cloudhub.io/icon

Send Document:- This  API  provides service to handling file attachments  as  multipart/form-data format.

http://mule-covid-app-guru1.us-e2.cloudhub.io/file

Previous version:- This  API also  provide same service without CSS Templates.

http://mule-covid-app-guru1.us-e2.cloudhub.io/main

Video streaming API:- This API enabled for streaming/download of  few mp4 video files

http://mule-video-app-guru1.us-e2.cloudhub.io/videos

Disclaimer :- Please note the above all the resource url are deployed temporary for demo purpose only.

I hope that you found this useful

Topics:
live updates, mule 4, website

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}