Microsoft Azure hosting | Nodejs | file doesn'

Question

I'm trying to build a webapp using nodejs. It compiles and runs fine on my local machine but when I try to host it on Azure, webpack seems to cause problem.

//webpack.config.js

var config = {
   entry: './main.js',

   output: {
      path:'/',
      filename: 'index.js',
   },

   devServer: {
      // inline: true,
      // port: 8080
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

This is the file hierarchy:

This is the sources tab in Chrome Dev tool for local machine. I notice here the index.js get compiled as specified in the config file.

Then I just place the source on the server using git. This is the response I get from the server:

This is the sources tab for the hosting server.

I suspect that it could be because there is difference in interpreting the directories on my local machine and the host?! I'm using MacOS.

Answer 1

Basically, you would need to compile your WebPack application first before deploying to Azure production server. However, you can also leverage Custom Deployment Script to install Node.js modules and run custom scripts to build your WebPack application on Azure Web Apps during the Azure Deployment task. For detailed steps, please check out this post on StackOverflow.