Azure App Service (Windows) - Nodejs ES Module Problems with SvelteKit app - node.js

really hoping someone can point me in the right direction with this one as i'm having no luck at all. I'm trying to host a simple nodejs sveltekit application on a Windows based azure app service, but cannot get the application to start / run.
I'm using the adapter-node adapter for sveltekit to generate the build output as a self contained node app. After sveltekit generates the build output I inject a simple package.json file to the root of the build folder to instruct node to use the ESM style imports which simply contains a single property of type="module".
package.json
{
"type": "module"
}
Lastly I also inject a web.config into the root of the build folder for use with IISNode. The web.config file used is the same as from the nodejs quickstart guide provided by MS. The web.config can be seen here.
The final folder structure of the build output is simply:
build
└───assets
│ └───_app
│ │ ...
└───prerendered
│ index.js
│ package.json
│ web.config
Locally I can take this build folder, place it anywhere on my machine and it runs perfectly by simply running:
node index.js
The Problem
Even though it works perfectly locally, when I deploy the application to the Azure app service the application will not start with the browser simply displaying "This page isn’t working right now".
When I check the logs I see the following error:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\home\site\wwwroot\index.js
require() of ES modules is not supported.
require() of D:\home\site\wwwroot\index.js from D:\Program Files (x86)\iisnode\interceptor.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from D:\home\site\wwwroot\package.json.
The error tells me that MS's iisnode\interceptor.js is using the commonjs style require syntax and cannot import the ES module of my index.js.
I found someone having a similar problem and a suggested solution here. The suggested solution is to create a new file next to my index.js file and configuring it as the app service's (or more specifically iisnode's) entry point in the web.config. The new file would be named run.cjs and only contain the following:
import("./index.js");
I tried this option, adding the new run.cjs file and updating the web.config to set this as IISNodes entry point:
<add name="iisnode" path="run.cjs" verb="*" modules="iisnode"/>
When I try the site after doing this I get a new problem. The site now loads but instead of seeing the app, the js from index.js renders as raw text into the browser.
The azure app service WEBSITE_NODE_DEFAULT_VERSION is set to ~14 and I can see from Kudu that the version running is 14.16.0 - my local machine is 14.17.0 so the node version looks to be ok.
Can anyone help??
Thanks in advance

Please re-install/update the npm module on your project.
Make sure all these files are present in your project.
Do not import your index.js file in other files like run.cjs or run.mjs, after building your application in your local and publish it in azure app service.
{
"type": "module"
}
This above code is required in the package.json file.
Check your npm reference files, if anyone of them is not installed properly, then you'll get the raw data which is present in app,js file, as output

Related

How to tell Azure Web App where server.js is

I have a yml file setup with Github actions while it deploys Azure doesn't actually serve the site correctly. It states in the Azure documentation that the container will start with one of the common files:
bin/www
server.js
app.js
index.js
hostingstart.js
My folder structure looks like this:
dist
server.js
...
build
...
node_modules
...
If I move /dist into the root the express server initiates and begins trying to serve routes but blows up due to the folder structure. Any help is appreciated.
You have to modify server.js file. You can find it following this path:
Configuration
General Settings
Startup Command
Type "./dist/server.js"
Do you have a Startup Command set within the Configuration -> General Settings page ?
If not, you can use this to provide optional command(s) to control how your instance starts.
You use this when you deviate from the standard its expecting.

React Builds- Which files go on the server? Why isn't my project deploying?

Goal: I have created the start of a React project and wish to test it on my server (hosted by goDaddy, uploading via cPanel). My app works fine in Development Mode.
Question: I have ran npm build which has created a build folder, but what files am I supposed to upload to my server? I tried putting the entire contents of the build folder on, but it still says the site is not launched. Is this because there is no index.html file generated? Currently my build folder contains: assets.json, LICENSE.txt, package.json, server.js, yarn.lock, chunks/ and public/. Is there supposed to be an html file generated? Or should these files be sufficient to deploy the website given that it works in development mode?
Thanks for bearing with me, this is the first time I have tried to deploy a React App and likely have several fundamental misunderstandings of how it works. Also if anyone is willing to chat for several minutes so I can ask a few questions about my project and react let me know - much appreciated!
Hello
Dear,
If you can try to change your package.json file and add ("homepage": "http://yourDomain/",) like this
"version": "0.1.0",
"homepage": "yourDominUrl",
Like
"homepage": "http://yourDomain/",
and
build again
npm run build
and the build folder is only should be uploaded file
Your answer is much more simple than appears: Just run npm run build, then just upload that whole folder to your GODADDY server. Importantly, you must place your index.html (or app-name.html) directly on the / public path defined by your URL's DNS. So, Top-level has your single entry point index.html that points to folder build/ to get your xyx.main.js and the xyz.main.css ...
and that's it! easy as pie

deploying es2015 nodejs site to azure

I am building a site with node.js express
and this is my file structure:
local file structure
the dist folder holds the packed version of the site and the src the dev
also I have 2 server file once for each version.
I went with that style after doing a pluralsight course with the same style.
my npm start script is:
"scripts": {
"start": "node node_modules/babel-cli/bin/babel-node.js tools/distServer.
},
locally it works great.
I hooked my azure webapp to my github repo for this project and each time it tells me the the build was successfully even that at first it looked for a server.js file at the root, I added it later as a copy of the distServer file.
and then I noticed another error:
"Start script "./node_modules/babel-cli/bin/babel-node.js server.js" from package.json is not found."
as the built was successful I didn't pay too much attention to it, but when I try to access the site it returns only 500 errors
once I checked the logs they were full of:
import express from 'express';
^^^^^^
SyntaxError: Unexpected token import
I have no idea how to make it work on azure, like it does locally and would appreciate any help.
It seems like your local node js version does not match you node js version on azure .
Compare your node js version by doing (node -v or nodejs -v ) on both environnement .

app.yaml in different directory than main.js?

I have a Node.JS application that I want to deploy on AppEngine. At the moment I am getting following error:
Beginning deployment of service [default]...
Building and pushing image for service [default]
ERROR: node.js checker: Neither "start" in the "scripts" section of "package.json" nor the "server.js" file were found.
ERROR: (gcloud.app.deploy) Your application does not satisfy all of the requirements for a runtime of type [nodejs]. Please correct the errors and try again.
This makes sense as this is the folder structure:
client
server
main.js
app.yaml
As you can see I have a separate folder for my client code and server code.
If I put the app.yaml file inside the server folder, the deployment works but when I try to access the app it cannot find the client files as they were not part of the deployment.
Is there anyway to configure this in the app.yaml or do I need to refactor my app?
actually app engine required package.json in your root directory ... and in which put script of start.. like start:node server/main.js

How to initialize a koa node.js app application on IISNode (Azure WebSites)

We are currently moving a self-hosted koa app to IISNode on Azure WebSites..
In self-hosting, we initiallize the application by calling
node --harmony ./bin/application
Requests then go to ./index.js.
However we could not find how to setup IISNode to call "bin/application" at initialization time.
Any ideas?
Thanks
Not sure this is the same scenario, but I ran into something that sounds like this when express.js started using ./bin/www as the entry point for express.js apps. Initially it broke everything, but now we look for the "scripts" entry in the package.json to tell Azure how to configure IISNode for the application. For express, it generates a "scripts" entry that looks like this:
"scripts": {
"start": "node ./bin/www"
},
When Azure sees this, it generates a web.config on the server that uses ./bin/www for the entry point.
So... I'd say first off, try adding a "scripts" entry to the package.json that points to your ./bin/application file, and try deploying that to Azure. Hopefully that 'just works'. If it doesn't, try adding a web.config to the root of your application, using https://gist.github.com/Blackmist/8677359708fd30779c77 as the contents. This should point IISNode to the ./bin/application file as the entrypoint, and is what Azure Websites should automatically generate when it sees the "scripts" entry in the package.json file.
The other problem you'll run into is using Node.js v0.11.13, which I don't believe is included in Azure websites by default, and passing the --harmony switches. http://azure.microsoft.com/en-us/documentation/articles/nodejs-specify-node-version-azure-apps/ has a section on including a version of node.js as part of your website. In the iisnode.yml file, you'd want to have a line similar to the following:
nodeProcessCommandLine: d:\home\site\wwwroot\bin\node.exe --harmony
I believe this should make this work.
You can setup custom deployment scripts for Azure Websites.
This blog post contains details on how to use it:
http://blog.amitapple.com/post/38417491924/azurewebsitecustomdeploymentpart1/#.VBcrnPldXIc

Resources