[FIXED] How to host json-server in azure

Issue

I am new in the software field, please have patience with my question and mistakes of technical terms:

Premises:- I have developed an front-end application using Angular4. The baseURL define in angular application is 'http://localhost:3000/'. My application uses restangular api to interact with json-server (I created a folder named json-server and it has db.json and public folder ). It is working perfectly fine when i start the json-server using command: json-server json-server --watch db.json

My application is finalized and thus I created a production build. Thereafter I moved all my files from dist folder to public folder of json-server. When i start the json-server, my application works fine.

Actual problem:- Now I wanted to host in azure. I simply copied all file/folder (db.json and public folder) from json-server folder as it is and put them in azure cloud. When azure hosting is done and I open the url in browser I got an error- "you don't have permission to view".

To rectify above error I deleted all files from azure and then I copied all files of dist folder and put them in azure cloud. Using this I could able to see the application in the browser but no images. At image there is an error- Response with status: 0 for URL: null

When I start json-server locally, everything works fine but of course when same web page open from other machines I got the same error- Response with status: 0 for URL: null

Is there any way to run json-server in azure so that all machines/mobile when accessing the url, can see proper web page without any error.

Solution

Step to step to run json-server on Azure Web App:

1. Open your browser and go to App Service Editor (https://<your-app-name>.scm.azurewebsites.net/dev/wwwroot/)

2. Run the command in the Console (Ctrl+Shift+C)

   npm install json-server --save-dev
   

3. Put all file/folder (db.json and public folder) into wwwroot folder

4. Create a server.js with the following content

   const jsonServer = require('json-server')
   const server = jsonServer.create()
   const router = jsonServer.router('db.json')
   const middlewares = jsonServer.defaults()
   
   server.use(middlewares)
   server.use(router)
   server.listen(process.env.PORT, () => {
     console.log('JSON Server is running')
   })
   

5. Click Run (Ctrl+F5), this will generate web.config file automatically and open your website in the browser.

   

Answered By - Aaron Chen

Answer Checked By - Willingham (PHPFixing Volunteer)