Deploy MEAN+Webpack on Azure

Question

How do I deploy a MEAN STACK+WEBPAC application?

• I have a MEAN Stack + Webpac application and nodejs server which provides the rest api
• I run the angular application using webpack dev server
• after building the webpack application,I have the build.js file.

How do I reference the build file from the nodejs application? Normally,with requirejs, I would use the html script tag, this way

<script src="build.js" /> 

I understand this is not the webpac way,

Answer 1

Generally speaking, we can leverage Custom Deployment Script to install the nodejs modules and run custom scripts during the Azure Deployment task, to build your webpack application on Azure Web Apps.

Please try the following steps:

1. Create a file .deployment and deploy.cmd by azure-cli command azure site deploymentscript --node --sitePath nodejs
2. Run npm command npm install --save webapck to install webpack into your local application's directory.
3. define a custom npm script in package.json file to run webpack command and let the deployment task call later: "scripts": { "webpack":"node_modules/.bin/webpack" },
4. Modify the deply.cmd file, add a process to run the npm script we defined. In the original file, you can find the similar script to install the node.js modules: :: 3. Install npm packages IF EXIST "%DEPLOYMENT_TARGET%\package.json" ( pushd "%DEPLOYMENT_TARGET%" call :ExecuteCmd !NPM_CMD! install --production IF !ERRORLEVEL! NEQ 0 goto error popd )
   we can define the custom script under it: :: 4. webpack IF EXIST "%DEPLOYMENT_TARGET%\webpack.config.js" ( pushd "%DEPLOYMENT_TARGET%" call :ExecuteCmd !NPM_CMD! run webpack IF !ERRORLEVEL! NEQ 0 goto error popd )
5. deploy your webpack application to Azure Web App via Git.

Here is my test webpack app repository on Github, FYI.