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 .
Related
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
I made a website with Vue.js and included Snipcart API for a buy button. I've been trying to deploy it to heroku for 2 days now.
When I enter $ npm run dev it works fine and will display my web app. But for some reason if I do $ node server.js it shows the default Vue welcome page for its webpack ("Welcome to Your Vue App").
I've tried entering "start":"npm run dev" in my package.json but that just results in a forever loading web page. If I enter "start":"node server.js" It results in the same thing as the previous paragraph, it just shows the default Vue welcome page.
I found someone with basically the same issue (How to set up vue(2)-cli app to run with nodejs server) and even tried the same tutorial post but I don't know what that comment/answer is talking about. I am also unsure of how to deploy a static website with a Snipcart API (as a previous user mentioned to me in a previous post).
I am really at a loss as to what to do. Thanks for your time.
Edit: Here is the repo for my app: https://github.com/Taikon/MaroonRiver0
Exactly what I suspected in the comment: You are not building your assets.
Run
npm run build
node server.js
And it should work as expected.
I am starting a new project which is using Angular 4 for frontend designing and the application will need some rest api's for which I have decided to use node. I am using angular cli for creating angular app and I know how to create angular app and node server but I want to know how will I connect these two things such that when I do ng serve both the server and angular app gets compiled and run. What basic changes in the project structure or some file is needed to be done?
I'm currently building a full-stack Angular app with a Node/Express backend and was wondering the exact same thing. However, despite what that scotch.io tutorial tells you, creating both the Express server and the Angular app in the same directory is NOT the best way to go about it.
What you want to do is set up your Express server in one project and serve it in one terminal window, then serve your Angular app in a separate terminal window but have it point to your locally-running Express server instead of the default dev server that's included with the Angular CLI (the ng-serve command).
Here's a Stack Overflow answer and also a Medium article that answered all of my questions for how to set this up (fortunately, it's not too hard).
Here's what I did Shubham. I went into the Angular-Cli and changed "outDir": to "../public"in other words it will look like "outDir": "../public". The ../public folder is my Express static folder set in my app.js file with app.use(express.static(path.join(__dirname, 'public')));
Keeping in mind I have nodemon installed globally, and in my package.json file, "start": "node app" I simply run nodemon from this dir to start my server and both Angular and Express run on the same server.
I have seen some people say it's not good to run static filed on the Node/Express server, but for development I'm not sure it matters. Although I'm a novice when it comes to js frameworks etc. Here's the project files on my github acct: https://github.com/chriskavanagh/angularauth.
Edit: You must run ng-build (in your Angular dir) whenever you change code.
First, in Angular project do ng build, it will create dist folder (static folder).
Second step, paste the following code in backend servers entry point file.
app.use(express.static(path.join(__dirname, 'dist/')));
app.get('*', (req, res) =>{
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
And after the above thing is done run backend server: node filename
Note: in give proper path where your index.html file is located in dist folder.
The node server and the Angular app are two different things.
In order to run the node server you should use the command:
node ServerName.js
In order to run the angular app you should use the command:
npm start OR ng serve
In your case, the connection between the two is made by http requests.
For example you could use 'express' in order to implement rest services in your node server and then send an http request to the server in the current route.
I'm trying to deploy my Django app on Heroku, that makes use of the Blockchain.info API V2 (https://github.com/blockchain/service-my-wallet-v3) and thus needs to run blockchain-wallet-service in the background, which in turn needs Node.js and npm installed.
On localhost, I have used this API successfully by running the service on my own machine, but I'm having trouble deploying to Heroku. Firstly, I assume I will need to run the service on a separate dyno, and that I will need node and npm installed on my instance.
Can someone tell me how to achieve this? I'm new to more advanced features of Heroku, I've tried to use the nodejs buildpack but I doubt this is the correct way. There is also this: https://elements.heroku.com/buttons/kmhouk/service-my-wallet-v3 which I've deployed as a separate app but I've failed to merge it in some way to my Django app.
Any help is much appreciated!
I had this exact same issue, bro, and i finally got some light in the end of the tunnel.
I've cloned the https://github.com/blockchain/service-my-wallet-v3 repository and deployed it to heroku and made some changes on "package.json" file. The problem is that (in heroku) you need to declare the dependencies on package file. I've added these lines:
"dependencies": {
"blockchain-wallet-service": "~0.22.4",
}
and a script to test in the deploy:
"scripts": {
"postinstall": "blockchain-wallet-service -V"
}
Also, by cloning this repository, i needed to add this line too:
"license" : "(ISC OR GPL-3.0)",
hope it works for you
I am trying to deploy a Rails 5 api with an Angular 2 front end, with the Angular code living an frontend folder inside of the main Rails project.
I was able to deploy using this tutorial (https://www.angularonrails.com/deploy-angular-2rails-5-app-heroku/), and specifically this custom Heroku buildpack (https://github.com/jasonswett/heroku-buildpack-nodejs/stargazers).
While this buildpack is absolutely awesome for existing, I am a little uncomfortable depending on the custom implementation in the long run. It also means I have to rename my frontend folder to client.
Is there a way to use the main Heroku Node buildpack, and somehow pass the path of my Angular frontend folder as an ENV variable? How would I go about doing this?
I've read through the Github conversations here (https://github.com/heroku/heroku-buildpack-nodejs/pull/192) and here (https://github.com/heroku/heroku-buildpack-nodejs/pull/203) but can't make heads or tails of it.
Please help!
the trick is to place a package.json at root with the following:
{
"scripts": {
"postinstall": "cd frontend && npm install"
}
}
substitute "frontend" with whatever folder the angular / node app is in.
See github issues discussion here: https://github.com/heroku/heroku-buildpack-nodejs/issues/323#issuecomment-227520485