2

After a lot of research , followed a YouTube Video https://youtu.be/Ny5vJRfQito and got the payment gateway deployed to Azure.

However while making payments , encountered the below issue stating the payment_intent.js was not found

404 payment_intent.js not found error

Error in console

enter image description here

Below is the screenshot of the file available in the Repository

File available in DevOps Repo

enter image description here

Navigated to the Azure App Service with the help of the URL https://myapp.scm.azurewebsites.net/DebugConsole/?shell=powershell and found that the file was not in the list as shown below

List of files in Azure App Service

enter image description here

Googled a lot , However could not find a solution to this.

Would appreciate if anyone out here could help me with the deployment on Azure and what are the additional steps that need to be taken to fix the issue.

Please let me know if any other details are needed

Thanks in Advance

UPDATE

This is a Next.js Application and the final project files are stored to the OUT folder as next.js doesn't have a build folder as shown below. Also the same files are shown under the www root.

The code runs fine on localhost , Below is the complete folder structure

Project Folder Structure

Below is the screenshot of the build pipeline

Build Pipeline

Below is the out folder

Folder Structure and Files

Vivek
  • 61
  • 4
  • 16
  • You can check whether the js file is deployed in the deploy task log, and check whether the js file is included in the deployed zip package. – Hugh Lin Nov 10 '20 at 09:31
  • @HughLin-MSFT Thank you for replying.. Being new to Azure DevOps , I am not sure if I fully understand your suggestion , Would appreciate if you could elaborate – Vivek Nov 10 '20 at 10:06

1 Answers1

10

I reproduce the 404 error using your code, and noticed that you use next.js project, which is a little different in Azure between local.

You need two file: server.js and web.config, and modify package.json like below. I test with your code, and it works perfect on my side.

package.json modify.

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "node server.js"

server.js (create this file with the code below:)

const { createServer } = require('http')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = new URL(req.url, 'http://w.w')
    const { pathname, query } = parsedUrl

    if (pathname === '/a') {
      app.render(req, res, '/a', query)
    } else if (pathname === '/b') {
      app.render(req, res, '/b', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

web.config (create this file with the code below:)

<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:
     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->

<configuration>
  <system.webServer>
    <!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- Do not interfere with requests for node-inspector debugging -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^server.js\/debug[\/]?" />
        </rule>

        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}"/>
        </rule>

        <!-- All other URLs are mapped to the node.js site entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="server.js"/>
        </rule>
      </rules>
    </rewrite>

    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />

    <!--
      You can control how Node is hosted within IIS using the following options:
        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
        * node_env: will be propagated to node as NODE_ENV environment variable
        * debuggingEnabled - controls whether the built-in debugger is enabled
      See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
    -->
    <!--<iisnode watchedFiles="web.config;*.js"/>-->
  </system.webServer>
</configuration> 

Refer to: unable to deploy next js to azure


This is the steps I did:

Pre: Add web.config and server.js and modify package.json.

1. Create build pipeline.

enter image description here enter image description here

2. Create release pipeline.

enter image description here enter image description here

3. Run build-->trigger publish.

Download and check the artifacts:

enter image description here

  1. Check the web app deployed in Azure. enter image description here enter image description here
Doris Lv
  • 3,083
  • 1
  • 5
  • 14
  • Thank you for taking your time out to help me out :) I have updated my answer , please let me know if you need more info , Would also appreciate if you could download the code from https://github.com/tmarek-stripe/demo-react-stripe-js and check how it goes – Vivek Nov 11 '20 at 12:27
  • @DorisLv can you please tell me what kind of resource you created on azure? You went straight to the pipeline creation. but what kind of project did you created? a static web app or web app? – Dani Pralea Mar 19 '21 at 15:37
  • I created an `node 14LTS` web app, based on Linux. @DanutPralea – Doris Lv Mar 22 '21 at 01:28
  • Doesnt work. I get nextjs typeErrors. – zhuhang.jasper Sep 30 '22 at 16:20