I was going through the some of the links to deploy React Js application on the azure app service. But i am facing some problem while deploying the application.
I have added all the necessary things like web.config file to public folder and also added build directory to the workspace.
Deploying web app on azure app service
Deploy Node.js to Azure App Service using Visual Studio Code
followed all the steps but getting below error when i try to deploy on azure app service. Before deploying i do run these commands
npm run build.
2020-08-19T10:44:45.762075166Z A P P S E R V I C E O N L I N U X
2020-08-19T10:44:45.762079567Z
2020-08-19T10:44:45.762083667Z Documentation: http://aka.ms/webapp-linux
2020-08-19T10:44:45.762088167Z NodeJS quickstart: https://aka.ms/node-qs
2020-08-19T10:44:45.762092268Z NodeJS Version : v12.16.3
2020-08-19T10:44:45.762096468Z Note: Any data outside '/home' is not persisted
2020-08-19T10:44:45.762100768Z
2020-08-19T10:44:45.789282727Z Found build manifest file at '/home/site/wwwroot/oryx-manifest.toml'. Deserializing it...
2020-08-19T10:44:45.792738514Z Build Operation ID: |OtQwveNuO0A=.83a2ec6c_
2020-08-19T10:44:47.255197638Z Writing output script to '/opt/startup/startup.sh'
2020-08-19T10:44:47.960307930Z Running #!/bin/sh
2020-08-19T10:44:47.960336532Z
2020-08-19T10:44:47.960345833Z # Enter the source directory to make sure the script runs where the user expects
2020-08-19T10:44:47.960355334Z cd "/home/site/wwwroot"
2020-08-19T10:44:47.960363235Z
2020-08-19T10:44:47.960370735Z export NODE_PATH=$(npm root --quiet -g):$NODE_PATH
2020-08-19T10:44:47.960378436Z if [ -z "$PORT" ]; then
2020-08-19T10:44:47.960386136Z export PORT=8080
2020-08-19T10:44:47.960393937Z fi
2020-08-19T10:44:47.960401238Z
2020-08-19T10:44:47.960408638Z echo Found tar.gz based node_modules.
2020-08-19T10:44:47.960416339Z extractionCommand="tar -xzf node_modules.tar.gz -C /node_modules"
2020-08-19T10:44:47.960424040Z echo "Removing existing modules directory from root..."
2020-08-19T10:44:47.960431740Z rm -fr /node_modules
2020-08-19T10:44:47.960439141Z mkdir -p /node_modules
2020-08-19T10:44:47.960446542Z echo Extracting modules...
2020-08-19T10:44:47.960453842Z $extractionCommand
2020-08-19T10:44:47.960461243Z export NODE_PATH="/node_modules":$NODE_PATH
2020-08-19T10:44:47.960468943Z export PATH=/node_modules/.bin:$PATH
2020-08-19T10:44:47.960476344Z if [ -d node_modules ]; then
2020-08-19T10:44:47.960483745Z mv -f node_modules _del_node_modules || true
2020-08-19T10:44:47.960491245Z fi
2020-08-19T10:44:47.960498446Z
2020-08-19T10:44:47.960505546Z if [ -d /node_modules ]; then
2020-08-19T10:44:47.960524748Z ln -sfn /node_modules ./node_modules
2020-08-19T10:44:47.960532849Z fi
2020-08-19T10:44:47.960540149Z
2020-08-19T10:44:47.960547550Z echo "Done."
2020-08-19T10:44:47.960554951Z npm start
2020-08-19T10:44:48.258132115Z Found tar.gz based node_modules.
2020-08-19T10:44:48.258154316Z Removing existing modules directory from root...
2020-08-19T10:44:48.260461807Z Extracting modules...
2020-08-19T10:44:48.262765098Z tar (child): node_modules.tar.gz: Cannot open: No such file or directory
2020-08-19T10:44:48.262778299Z tar (child): Error is not recoverable: exiting now
2020-08-19T10:44:48.262970515Z tar: Child returned status 2
2020-08-19T10:44:48.262983816Z tar: Error is not recoverable: exiting now
2020-08-19T10:44:48.290740216Z Done.
2020-08-19T10:44:48.512406278Z npm info it worked if it ends with ok
2020-08-19T10:44:48.512836614Z npm info using npm#6.14.4
2020-08-19T10:44:48.512976126Z npm info using node#v12.16.3
2020-08-19T10:44:48.578204629Z npm info lifecycle adal_appp#0.1.0~prestart: adal_appp#0.1.0
2020-08-19T10:44:48.584464048Z npm info lifecycle adal_appp#0.1.0~start: adal_appp#0.1.0
2020-08-19T10:44:48.589867495Z
2020-08-19T10:44:48.589881796Z > adal_appp#0.1.0 start /home/site/wwwroot
2020-08-19T10:44:48.589887297Z > react-scripts start
2020-08-19T10:44:48.589891697Z
2020-08-19T10:44:48.597331914Z sh: 1: react-scripts: not found
2020-08-19T10:44:48.598224588Z npm info lifecycle adal_appp#0.1.0~start: Failed to exec start script
2020-08-19T10:44:48.599091959Z npm ERR! code ELIFECYCLE
2020-08-19T10:44:48.599182267Z npm ERR! syscall spawn
2020-08-19T10:44:48.599258573Z npm ERR! file sh
2020-08-19T10:44:48.599314678Z npm ERR! errno ENOENT
2020-08-19T10:44:48.600738196Z npm ERR! adal_appp#0.1.0 start: `react-scripts start`
2020-08-19T10:44:48.600749897Z npm ERR! spawn ENOENT
2020-08-19T10:44:48.600754497Z npm ERR!
2020-08-19T10:44:48.600758798Z npm ERR! Failed at the adal_appp#0.1.0 start script.
2020-08-19T10:44:48.600763398Z npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-08-19T10:44:48.605436585Z npm timing npm Completed in 125ms
2020-08-19T10:44:48.605621800Z
2020-08-19T10:44:48.605672405Z npm ERR! A complete log of this run can be found in:
2020-08-19T10:44:48.605750311Z npm ERR! /root/.npm/_logs/2020-08-19T10_44_48_601Z-debug.log
But the thing is the same application runs perfectly on local with below commands
npm install , npm start.
and just to verify whether the build which generated after npm run build works or not tried running the application from the build directory with below commands
npm install -g serve
then
serve -s build
then application opens up in browser.
After doing some googling found solution. We need to add the below command in start up command in app service configuration for the Linux machines.
pm2 serve /home/site/wwwroot --no-daemon
Steps:
- Go to App Service
- Navigate to Configuration
- Click on General Settings
- add the above command in Start up command, click on save
- then restart the server
From the log it looks like this is not a Node.js application, but a react application. Therefore react-scripts start is something the Azure App Service doesn't know anything about.
When you run a react app on localhost, it is powered by a development server which indeed is a Node.js server, but once you build it for production using npm run build it is nothing but an index.html file powered by a bunch of .js files and stylesheets. It has no web capabilities in itself.
serve on the other hand is a separate story. As per their description at npmjs.com: Assuming you would like to serve a static site, single page application or just a static file (no matter if on your device or on the local network), this package is just the right choice for you.
But this is not an Azure-like approach.
In production however, if you are using Azure, I recommend using Azure Blob Storage v2, which has static site hosting capabilities. Enable static site hosting in the blob storage and deploy the build folder in a container named $web. Ofcourse all of this is automatically done if you are using vscode with the Azure plugin. Assuming you have signed into Azure thru vscode, right-click on the build folder and select deploy to static site, follow the steps and you will be live with your react app.
However, if you do have a Node.js express backend alongside the react app, then you may put the build folder into the Node.js project at the same level as the node_modules folder and use static routing to have both frontend and backend work as a single package. Explicitly define a route to tell express to respond with the index.html file when asked for. Then you can deploy the whole package into an Azure App Service.
const express = require('express');
const path = require('path');
const port = process.env.PORT || 3006;
const app = express();
app.use(express.json())
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json({extended: true}));
app.use(express.static(__dirname + '/build'));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname + '/build/index.html'))
});
// Then prefix your API endpoints with /api
app.get('/api/user/:id', (req, res) => {
// Code to get user by id
});
app.post('/api/user', (req, res) => {
// Code to save user
});
app.listen(port, () => {
console.log(`App bootstrapped on port ${port}...`);
});
When / is hit, then index.html is served. API calls served as defined with /api/*. I find this mechanism useful many a times.
Good luck.
Related
First, thank you for reading my question. This is my first time on stackoverflow and I made a lot of research for answers that could help me.
CONTEXT
I'm developing a Meteor App that is used as a CMS, I create contents and store datas in mongoDb collections. The goal is to use these datas and a React project to build a static website, which is sent to an AWS S3 bucket for hosting purpose.
I'm using meteorUp to deploy my Meteor App (on an AWS EC2 instance) and according to MeteorUp documentation (http://meteor-up.com/docs.html#volumes), I added a docker volume in my mup.js:
module.exports = {
...
meteor: {
...
volumes: {
'/opt/front': '/front'
},
...
},
...
};
Once deployed, volume is well set in '/opt/myproject/config/start.sh':
sudo docker run \
-d \
--restart=always \
$VOLUME \
\
--expose=3000 \
\
--hostname="$HOSTNAME-$APPNAME" \
--env-file=$ENV_FILE \
\
--log-opt max-size=100m --log-opt max-file=10 \
-v /opt/front:/front \
--memory-reservation 600M \
\
--name=$APPNAME \
$IMAGE
echo "Ran abernix/meteord:node-8.4.0-base"
# When using a private docker registry, the cleanup run in
# Prepare Bundle is only done on one server, so we also
# cleanup here so the other servers don't run out of disk space
if [[ $VOLUME == "" ]]; then
# The app starts much faster when prepare bundle is enabled,
# so we do not need to wait as long
sleep 3s
else
sleep 15s
fi
On my EC2, '/opt/front' contains the React project used to generate a static website.
This folder includes a package.json file, every modules are available in the 'node_modules' directory. 'react-scripts' is one of them, and package.json contains the following script line:
"build": "react-scripts build",
React Project
React App is fed with a JSON file available in 'opt/front/src/assets/datas/publish.json'.
This JSON file can be hand-written (so the project can be developed independently) or generated by my Meteor App.
Meteor App
Client-side, on the User Interface, we have a 'Publish' button that the Administrator can click when she/he wants to generate the static website (using CMS datas) and deploy it to the S3 bucket.
It calls a Meteor method (server-side)
Its action is separated in 3 steps:
1. Collect every useful datas and save them into a Publish collection
2. JSON creation
a. Get Public collection first entry into a javascript object.
b. Write a JSON file using that object in the React Project directory ('opt/front/src/assets/datas/publish.json').
Here's the code:
import fs from 'fs';
let publishDatas = Publish.find({}, {sort : { createdAt : -1}}).fetch();
let jsonDatasString = JSON.stringify(publishDatas[0]);
fs.writeFile('/front/src/assets/datas/publish.json', jsonDatasString, 'utf8', function (err) {
if (err) {
return console.log(err);
}
});
2. Static Website build
a. Run a CD command to reach React Project's directory then run the 'build' script using this code:
process_exec_sync = function (command) {
// Load future from fibers
var Future = Npm.require("fibers/future");
// Load exec
var child = Npm.require("child_process");
// Create new future
var future = new Future();
// Run command synchronous
child.exec(command, {maxBuffer: 1024 * 10000}, function(error, stdout, stderr) {
// return an onbject to identify error and success
var result = {};
// test for error
if (error) {
result.error = error;
}
// return stdout
result.stdout = stdout;
future.return(result);
});
// wait for future
return future.wait();
}
var build = process_exec_sync('(cd front && npm run build)');
b. if 'build' is OK, then I send the 'front/build' content to my S3 bucket.
Behaviors:
On local environment (Meteor running on development mode):
FYI: React Project directory's name and location are slightly different.
Its located in my meteor project directory, so instead of 'front', it's named '.#front' because I don't want Meteor to restart every time a file is modified, added or deleted.
Everything works well, but I'm fully aware that I'm in development mode and I benefit from my local environment.
On production environment (Meteor running on production mode in a docker container):
Step 2.b : It works well, I can see the new generated file in 'opt/front/src/assets/datas/'
Step 3.a : I get the following error:
"Error running ls: Command failed: (cd /front && npm run build)
(node:39) ExperimentalWarning: The WHATWG Encoding Standard
implementation is an experimental API. It should not yet be used in
production applications.
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm
ERR! front#0.1.0 build: react-scripts build npm ERR! Exit status 1
npm ERR! npm ERR! Failed at the front#0.1.0 build script. npm ERR!
This is probably not a problem with npm. There is likely additional
logging output above.
npm ERR! A complete log of this run can be found in: npm ERR!
/root/.npm/_logs/2021-09-16T13_55_24_043Z-debug.log [exec-fail]"
So here's my question:
On production mode, is it possible to use Meteor to reach another directory and run a script from a package.json?
I've been searching for an answer for months, and can't find a similar or nearby case.
Am I doing something wrong?
Am I using a wrong approach?
Am I crazy? :D
Thank you so much to have read until the end.
Thank you for your answers!
!!!!! UPDATE !!!!!
I found the solution!
In fact I had to check few things on my EC2 with ssh:
once connected, I had to go to '/opt/front/' and try to build the React-app with 'npm run build'
I had a first error because of CHMOD not set to 777 on that directory (noob!)
then, I had an error because of node-sass.
The reason is that my docker is using Node v8, and my EC2 is using Node v16.
I had to install NVM and use a Node v8, then delete my React-App node_modules (and package-lock.json) then reinstall it.
Once it was done, everything worked perfectly!
I now have a Meteor App acting as a CMS / Preview website hosted on an EC2 instance that can publish a static website on a S3 bucket.
Thank you for reading me!
!!!!! UPDATE !!!!!
I found the solution!
In fact I had to check few things on my EC2 with ssh:
once connected, I had to go to '/opt/front/' and try to build the React-app with 'npm run build'
I had a first error because of CHMOD not set to 777 on that directory (noob!)
then, I had an error because of node-sass.
The reason is that my docker is using Node v8, and my EC2 is using Node v16.
I had to install NVM and use a Node v8, then delete my React-App node_modules (and package-lock.json) then reinstall it.
Once it was done, everything worked perfectly!
I now have a Meteor App acting as a CMS / Preview website hosted on an EC2 instance that can publish a static website on a S3 bucket.
Thank you for reading me!
I have built a single-page weather app with React and Node.js but can't seem to get it to deploy to Heroku. So far, I have:
Created a new app on Heroku called weather-app-react-node
Logged into Heroku on the CLI
Run the command 'heroku git:remote -a weather-app-react-node' in my terminal
Added a Procfile with 'web: npm start' in it
Ran 'git add .', 'git commit -m "Pushed to heroku"', 'git push heroku master'
My terminal tells me it is deployed and waiting but when I click on the link, I get this error message:
SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
I've tried to google it but can't seem to find anything relevant to my situation. Anyone know how to fix it?
heroku-site: https://weather-app-react-node.herokuapp.com/github: https://github.com/caseycling/weather-app
To deploy the React app to Heroku, I performed the following steps...
1. In your terminal, enter npm -v and node -v to get your npm and node version. In my case, my npm version is 6.14.1 & my node version is 12.13.0.
2. In package.json, add "main": "server.js", and "engines": { "npm": "6.14.1", "node": "12.13.0" }, under the "private" property. In your scripts property, add "heroku-postbuild": "npm install" and set "start" to "node server.js".
3. In the root directory, create a Procfile with one line of text: web: node server.js.
4. In the root directory, create the server.js file with the below code..
const express = require("express");
// eslint-disable-next-line no-unused-vars
// const bodyParser = require('body-parser');
const path = require("path");
const app = express();
const port = process.env.PORT || 8080;
app.use(express.static(path.join(__dirname, "build")));
// This route serves the React app
app.get('/', (req, res) => res.sendFile(path.resolve(__dirname, "build", "index.html")));
app.listen(port, () => console.log(`Server listening on port ${port}`));
5. Enter npm run build in the terminal to produce the build directory. Next, remove (or comment out) /build from .gitignore file (in root directory).
6. Test if server.js works by entering node server.js (or nodemon server.js) in the terminal. If it works, server.js should serve the React app.
7. Commit everything from step 1-6 to GitHub and Heroku repository. To commit to Heroku repository, in your terminal, enter heroku git:remote -a weather-app-react-node and afterward, enter git push heroku master.
You can try logging in to heroku directly and deploy your github repository's desired branch from there directly.
I used create-react-app-buildpack
npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
or
heroku create -b mars/create-react-app
git add .
git commit -m "I am the newborn app"
git push heroku master
heroku open
Note: In my case, buildpack config from CLI did not work, I still had nodejs-build pack, so I manually changed the build pack to mars/create-react-app in the Heroku project dashboard
The best practice to push React apps to Heroku with a node js backend is to use the Heroku Post Build Script, The post build will take care of all the work under the hood
Follow the steps below
Add This below snippet to your package.json under the scripts
scripts{
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix reactFolderName && npm run build --prefix reactFolderName"
}
And add this snippet to your index.js file
app = express()
app.use(express.static('reactFolderName/build'));
app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'reactFolderName', 'build', 'index.html')));
After I set up the all the things above mentioned I'm facing this issue.
When I'm using the URL like http://localhost:8080/ & http://localhost:8080/button
Cannot GET /button
In Console
Failed to load resource: the server responded with a status
of 404 (Not Found)
DevTools failed to load source map: Could not load content
for chrome-
extension://gighmmpiobklfepjocnamgkkbiglidom/browser-
polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
I used vue-cli in
vue init nuxt/express myProject
and,
npm run dev
developed.
but,
npm run build
after, was created dist file.
How i can run in real service in pm2?
(I will use ubuntu in AWS EC.)
you just need to start your app like that:
pm2 start npm --name "your-project-name" -- start
Check the status:
pm2 status
and after you can restart / stop:
pm2 restart your-project-name
pm2 stop your-project-name
Prerequisites
node.js installed on web server
nginx installed and configured on web server
pm2 installed and configured on web server
Then
Add to your universal Nuxt app for serving it though PM2 is a file called ecosystem.config.js. Create a new file with that name in your root project directory and add the following content:
module.exports = {
apps: [
{
name: 'project-name',
exec_mode: 'cluster',
instances: 'max', // Or a number of instances
script: './node_modules/nuxt/bin/nuxt.js',
args: 'start'
}
]
}
Connect to your linux server via FTP (FileZilla or etc..)
Send the blue files I marked to the server.
(you don't need to upload node_modues, .nuxt, dist, .git, .idea, etc... folders)
Connect server via ssh console, (windows : putty)
and go to projects folder that you uploaded files.
cd /
cd var/www/project-name
Install node_modules folder by;
npm install
Execute nuxt build and create .nuxt folder by;
npm run build
Finally, ready to start starts pm2 server by;
pm2 start
I am following this guide. Having problem deploying to azure.
https://learn.microsoft.com/en-us/azure/app-service-web/app-service-web-nodejs-sails#step-3-configure-and-deploy-your-sailsjs-app
Full Error
remote: Failed exitCode=-4071, command="D:\Program Files (x86)\nodejs\6.9.1\node.exe" "D:\Program Files (x86)\npm\3.10.8\node_modules\npm\bin\npm-cli.js" install --production
also
remote: npm ERR! EINVAL: invalid argument, rename 'D:\home\site\wwwroot\node_modules\.staging\spdx-license-ids-3f30671f' -> 'D:\home\site\wwwroot\node_modules\sails-hook-grunt\node_modules\grunt-contrib-cssmin\node_modules\maxmin\node_modules\pretty-bytes\node_modules\meow\node_modules\normalize-package-data\node_modules\validate-npm-package-license\node_modules\spdx-correct\node_modules\spdx-license-ids'
Thanks
I do a demo following the tutorials that you mentioned. It works correctly on my side. I used node.js v7.9 locally. If it is possible, please have a try to update the node.js version to latest locally. The following is my details steps.
1.Following the document to install Sails and create a demo project
$npm install sails -g
$sails new test-sails-project
2.go to localhost:1337 to see your brand new homepage
$ cd test-sails-project
$ sails lift
We can check that it works correctly in the local
4.Following the document step by step
a.Add iisnode.yml file with the following code in the root directory
loggingEnabled: true
logDirectory: iisnode
b.set port and hookTimeout in the config/env/production.js
module.exports = {
// Use process.env.port to handle web requests to the default HTTP port
port: process.env.port,
// Increase hooks timout to 30 seconds
// This avoids the Sails.js error documented at https://github.com/balderdashy/sails/issues/2691
hookTimeout: 30000,
...
};
c.hardcode the Node.js version you want to use. In package.json
"engines": {
"node": "6.9.1"
},
5.Create a Azure WebApp on the Azure portal and get the profile.
6.Push the code to the Git remote and check from the Azure portal.
I´m trying to run AtlasBoard in an Azure Web App, but can´t get it to work. I have created a new board using the "Get started in 30 seconds" steps and the demo board runs fine when I start it locally. It works both by starting it with atlasboard start 3333or if I run node start.
I´ve added the node_modules directory to .gitignore.
I´m using git deployment on Azure and this seems to work fine. The deployment log also shows that the npm modules are installed.
This is the last ouput from the deployment:
Using start-up script start.js from package.json.
Generated web.config.
The iisnode.yml file explicitly sets nodeProcessCommandLine. Automatic node.js version selection is turned off.
Selected npm version 3.5.1
npm WARN Invalid name: "HRMTS AtlasBoard"
npm WARN wwwroot No description
npm WARN wwwroot No repository field.
npm WARN wwwroot No README data
npm WARN wwwroot No license field.
Finished successfully.
However, the app doesn´t seem to start and when I look at the log message in the Kudu console, I get this:
Error: error installing D:\home\site\wwwroot\packages\demo
at process.<anonymous> (D:\Program Files (x86)\iisnode\interceptor.js:73:106)
at emitOne (events.js:96:13)
at process.emit (events.js:188:7)
at process._fatalException (node.js:267:26)
Does anyone have a clue about what´s wrong here?
If you are using the repo of the demo application at https://bitbucket.org/atlassian/atlasboard/src to test on Azure, there several additional modifications we need do to make the test run on Azure Web Apps.
First of all, assume you have successfully deploy the application to Azure, and it failed when start running the application. Then you can leverage Kudu console site or Visual Studio Online extension (refer to the answer of How to install composer on app service? for how to enable extensions of Azure Web Apps) to check the error log at D:\home\site\wwwroot\packages\demo\npm-debug.log.
There are similar errors:
155 error node -v v0.6.20
156 error npm -v 1.1.37
157 error message SSL Error: CERT_UNTRUSTED
It seems that the atlasboard runs command with very low node version on Azure. We can manually modify the dependent scripts to bypass the errors.
If you get error during deployment, you should modify the npm version in package.json before deployment, for example:
"engines": {
"npm": ">2.0.0",
"node": ">=0.10"
},
After deployment:
check and modify the port in the start.js in the root directory:
atlasboard({port: process.env.port||3000 , install: true},
function (err) {
if (err) {
throw err;
}
});
modify the install function in D:\home\site\wwwroot\node_modules\atlasboard\lib\package-dependency-manager.js to use a higher npm version and remove --production param, e.g :
...
var npmCommand = isWindows ? "D:\\Program Files (x86)\\npm\\3.5.1\\npm.cmd" : "npm";
executeCommand(npmCommand, ["install", pathPackageJson], function(err, code){
...
})
Then restart your website.
Any further concern, please feel free to let me know.