Web App Builder custom widgets returning 404 Error when clicked on

Rohit_Venkat_GandhiMendadhala2

I am trying to build a custom widget using the Web App Builder Developer Edition. When I ran the batch file and imported the Demo widget at the position 4 in the off-panel widget and when I click it, it's not showing anything and keeps on loading. When I see in the console, it's showing a GET error with 404 (Not Found). Can anyone help me in fixing this? I am yet to host this application into our web server. I am currently running it on my local machine. Below are the screenshots of my chrome console and folder structure.

Rohit_Venkat_GandhiMendadhala2

Here is a snapshot from code.

default.reports is used in the dojo framework define() in widget.js and in config.js

As we are trying to make a widget for infographics and reports which will actually get them from our BAO subscription,

I am trying to have the GET request response to be the following

{
"infographicReports": [
{"id":"12867e4a89d5461fbbe3b9c6c181993a","name":"US At-Risk Population"},
{"id":"c931fc6ebdb440189a8bc6bd34115807","name":"US Executive Summary"},
{"id":"e2a6868f979f4e37896b631581ae4918","name":"US Demographic Summary"},
{"id":"3afd4c5089584b089af5b0037d74a9d1","name":"US Transportation to Work"},
{"id":"a696eae378974ed5a63510fa70bed011","name":"US Health Care"},
{"id":"efb6bee0a80d4801887ec4cf73aa67fc","name":"Marketing Profile"},
{"id":"6637be1fbddf4e948fbd09ce6a7a7888","name":"US Property Flyer"},
{"id":"02c1124e916847249aa91b9ce48c2552","name":"US Skyscraper"},
{"id":"88420f4a98bb45cbacacbad67e23266e","name":"US Key Facts"},
{"id":"96096c8afa4847dea936942b1f89acb5","name":"Tapestry Profile"}
],
"demographicReports": [
{"type":"Esri", "id":"census2010_profile", "name":"2010 Census Profile"},
{"type":"Esri", "id":"acs_housing", "name":"ACS Housing Summary"},
{"type":"Esri", "id":"acs_population", "name":"ACS Population Summary"},
{"type":"Esri", "id":"55plus", "name":"Age 50+ Profile"},
{"type":"Esri", "id":"agesexrace", "name":"Age by Sex by Race Profile"},
{"type":"Esri", "id":"agesex", "name":"Age by Sex Profile"},
{"type":"Esri", "id":"cex_auto", "name":"Automotive Aftermarket Expenditures"},
{"type":"Esri", "id":"business_loc", "name":"Business Locator"},
{"type":"Esri", "id":"business_summary", "name":"Business Summary"},
{"type":"Esri", "id":"community_profile", "name":"Community Profile"},
{"type":"Esri", "id":"Custom_Map_Landscape", "name":"Custom Map Landscape"},
{"type":"Esri", "id":"Custom_Map_Portrait", "name":"Custom Map Portrait"},
{"type":"Esri", "id":"dandicomparison", "name":"Demographic and Income Comparison Profile"},
{"type":"Esri", "id":"dandi", "name":"Demographic and Income Profile"},
{"type":"Esri", "id":"agedet", "name":"Detailed Age Profile"},
{"type":"Esri", "id":"dispinc", "name":"Disposable Income Profile"},
{"type":"Esri", "id":"tapestry_map", "name":"Dominant Tapestry Map"},
{"type":"Esri", "id":"mpi_pc", "name":"Electronics and Internet Market Potential"},
{"type":"Esri", "id":"execsummary", "name":"Executive Summary"},
{"type":"Esri", "id":"mpi_investment", "name":"Finances Market Potential"},
{"type":"Esri", "id":"cex_financial", "name":"Financial Expenditures"},
{"type":"Esri", "id":"graphic", "name":"Graphic Profile"},
{"type":"Esri", "id":"mpi_health", "name":"Health and Beauty Market Potential"},
{"type":"Esri", "id":"cex_home", "name":"House and Home Expenditures"},
{"type":"Esri", "id":"cex_budget", "name":"Household Budget Expenditures"},
{"type":"Esri", "id":"hh_income", "name":"Household Income Profile"},
{"type":"Esri", "id":"housing", "name":"Housing Profile"},
{"type":"Esri", "id":"LandscapeSummaryReport", "name":"Landscape Summary Report"},
{"type":"Esri", "id":"shopping", "name":"Major Shopping Center Locator"},
{"type":"Esri", "id":"shopping_centers_map", "name":"Major Shopping Center Map"},
{"type":"Esri", "id":"market_profile", "name":"Market Profile"},
{"type":"Esri", "id":"cex_medical", "name":"Medical Expenditures"},
{"type":"Esri", "id":"networth", "name":"Net Worth Profile"},
{"type":"Esri", "id":"mpi_pet", "name":"Pets and Products Market Potential"},
{"type":"Esri", "id":"cex_recreation", "name":"Recreation Expenditures"},
{"type":"Esri", "id":"mpi_restaurant", "name":"Restaurant Market Potential"},
{"type":"Esri", "id":"cex_retail", "name":"Retail Goods and Services Expenditures"},
{"type":"Esri", "id":"mpi_retail", "name":"Retail Market Potential"},
{"type":"Esri", "id":"retail_market", "name":"Retail MarketPlace Profile"},
{"type":"Esri", "id":"site_details_map", "name":"Site Details Map"},
{"type":"Esri", "id":"site_map_imagery04", "name":"Site Map on Satellite Imagery - 0.4 Miles Wide"},
{"type":"Esri", "id":"site_map_imagery08", "name":"Site Map on Satellite Imagery - 0.8 Miles Wide"},
{"type":"Esri", "id":"site_map_imagery16", "name":"Site Map on Satellite Imagery - 1.6 Miles Wide"},
{"type":"Esri", "id":"site_map", "name":"Site Map"},
{"type":"Esri", "id":"mpi_sports", "name":"Sports and Leisure Market Potential"},
{"type":"Esri", "id":"tapestry_profileNEW", "name":"Tapestry Segmentation Area Profile"},
{"type":"Esri", "id":"traffic", "name":"Traffic Count Profile"},
{"type":"Esri", "id":"traffic_map", "name":"Traffic Count Map"},
{"type":"Esri", "id":"traffic_map08", "name":"Traffic Count Map - Close Up"}
]
}

But my code is providing a 404 Error not found which shows:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /webappbuilder/apps/2/widgets/DatastoryTradeAreaStats/defaultReports.json</pre>
</body>
</html>