I've created an Angular 1.6.x application using Visual Studio Code, with bower'ed dependencies. The Angular app talks to a separate ASP.NET MVC REST/API application for data (eventually with adal-angular).
Locally, I'm using http-server to run the Angular app successfully using npm start:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "start http://localhost:8080/app/index.html && http-server -a localhost -p 8080"
},
While I've been able to successfully get the Angular source code to my defined App Services on the Azure (verified using the Web App's console option) using the Continuous Delivery mechanism, it's not entirely obvious how the application will start, specifically:
How does Azure know how to do a "npm start"? Where do I instruct this to happen, if it's not automatic?
How would I instruct my application to use process.env.PORT, instead of port 8080?
Assuming I get past this initial issue, are there guidelines for http-server usage on Azure? Or are there other recommended ways to serve Angular SPAs?
FWIW, I note that the trying to run 'npm start' from the Azure console results in an 'ELIFECYCLE' error.
As you deploy your app to Azure WebApp, Azure will use IIS to host your app and only ports 80 and 443 are public-facing. So you don't need any other HTTP server to server your web application on Azure.
You can clarify what issue you ran into when you visited your website, so we can help to figure out what's wrong there.
The Azure Web App model hosts node.js/Angular apps within IIS, therefore a configured web.config file is required. The magic glue between IIS and node is the iisnode module: https://github.com/tjanczuk/iisnode that allows hosting of node.js applications within IIS.
The web.config file can direct IIS to start the app's app.js (or server.js) file, which would include a reference to process.env.PORT.
A good overall guide for deploying node apps is: https://blogs.msdn.microsoft.com/laurelle/2015/12/01/how-to-deploy-a-node-js-site-into-azure-web-app-to-create-a-website/.
The best guideline and documentation I could find on setting up a web.config is here: https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
Related
I start my React app using:
npm start
This starts the app on localhost:3000
I would like to have it start with a domain instead of localhost. When testing locally, I have a local domain (example mydomain.com) set to IP address 127.0.0.1. This allows me to use the actual domain in code when making requests to the backend. Without this, my code would need to support both localhost and my domain and swap them out in production.
npm start is only a command to run your react app in development mode.. for faster build and publish functionalities..
So for production, you will be using npm build to get a production build for the same. This won;t be automatically deplyed or hosted on your localhost:3000.
So production deployment you will have to host your compiled build files using IIS or some hosting application. There you can configure your preferred DNS, whcihever domain name you would want to use.
You can customise the url for deployment for development.
In your .env.development add this line
HOST='mydomain.com'
If you want to deploy at https, add this line also in same file
HTTPS=true
I am currently trying to deploy the default react web app to Azure and I am encountering an issue where though I deploy the contents of my build folder to the azure hosted /site/wwwroot folder I end up on the following page when going to my hosted address: https://[project_name].azurewebsites.net/
Landing Page :
I intend to deploy the default create-react-app react application so that I may have the process down for when I deploy my real site.
The process I have followed is pretty much exactly what is mentioned in this article https://medium.com/#to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321
Create the default React App with create-react-app
Run "npm run build" to get the build folder
Go into the Azure React Portal and create a new Web App ***
FTP / Git deploy the contents of the local build folder into the Azure website's /site/wwwroot/ folder
For overkill I added the below web.config file to handle future routes, but have also tried without this step
In the end my Azure site's contents look like this
Folder contents :
At this point when I try to access the Azure site I get the "Hey, Node developers!" page which implies my code is not deployed. Any thoughts as to why this might be the case?
*** I have a hunch that during the configuring of the Azure Web Api something is not set up correctly perhaps because I select Node 10.14 as my Runtime stack simply because that is the version of Node that I have installed and am using with my local React app.
Thank you folks for your time.
Another approach is to configure Azure Linux Web App Service to run a startup command to serve your React app in "Settings > General settings > Startup Command":
pm2 serve /home/site/wwwroot/ --no-daemon
Remember to change the path to your build path (The path to your index.html file).
If you use react-router and wants to make any direct access on custom routes be handled by index.html you need to add --spa option on the same command.
pm2 serve /home/site/wwwroot/ --no-daemon --spa
Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.
You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml
I've coped with the same problem recently: React router direct links not working on Azure Web App Linux
You have created a Linux App Service - your web.config won't work because there is no IIS.
If you don't select node as the runtime stack, your app will work for the most part because it serves the files like a static web host. However I would suggest to keep the runtime stack as node and add the following file to your deployment in the wwwroot folder:
ecosystem.config.js
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff
There's an extremely simple way to overcome this problem, and although it is not perfect, it works both on AWS, Microsoft Azure, and probably any other hosting:
Just point the error document to: index.html
I found it out here:
https://stackoverflow.com/a/52343542/3231884
Disclaimer: This solution is not perfect and impacts SEO. Google doesn't rank well sites that throw 404s.
Does somebody know how to set up propertly websites based on angular (auto generated with yeoman) on ubuntu server?
Here is the thing, I have a project developed in angular, I generated it with yeoman (the basic example, on yeoman codelab). I can run it and see it working on my computer with "grunt serve", but I have no idea how to upload it to my server for access it from the internet.
On my ubuntu, I have installed apache2, MySQL, PHPMyAdmin, and Node (i guess I do not need apache2 for all this, but I have it anyway).
I connect with putty and the command node works fine, npm works fine too.
I am searching info, but I only found how to run a service on the node (example:node test.js) but this is not the case.
But what I want to do is to upload a website (angular) for access it from the internet...
I uploaded the "app" folder (that has the index.html, styles, controllers, views, etc) of my angular website (generated with yeoman), i uploaded it on my www directory in ubuntu, but when I access angular, or styles doesn´t work.
So, the question is: Does NODE have a "www" directory (like in apache2) where I have to upload my websites (angular websites) for access it from the internet? or I have to run it with some kind of "grunt" or "node" command?
Because i can´t run it with "node index.html", and if i access it from the internet it doesn´t work either, so... what am I doing wrong?
If you have a runnable app on local then follow these steps:
Set it up on git and host on github, bitbucket or any other git hosting and connect your server via ssh and choose/make whatever directory. (Doesnt matter which direcory, I personally prefer /var/www )
Pull that repo in that directory.
Run the app using forever or some process management tool like pm2
PS: grunt is more of a developer tool than production tool. so start your app directly using node wahtever_your_server_file_is.js in forever
Also make sure whatever port you are using to run the app is open on your server.
Hello i'm trying to develop a restful api using nodejs and express, and i also want to create a client-side application using angularjs. As explained in AngularJS oficial website:
"The angular-phonecat project is configured with a simple static web server for hosting the application during development. Start the web server by running:
npm start
This will create a local webserver that is listening to port 8000 on your local machine. You can now browse to the application at:
http://localhost:8000/app/index.html"
So i should run client side app in node web server. but my restful api also run in my node web server. How should i set up node js to be able to run both instances of nodejs at the same time and be able to conect to my restful api from my angularjs application
If your app is structured like angular-phonecat, open your package.json file and find where the npm start command is configured (hint: "scripts" > "start") and change the port that http-server is using.
i.e. "http-server -a 0.0.0.0 -p new_port_number"
I have a node.js app, which creates HTTP server and handles socket connections, and I have an Ionic Framework Application (angular.js)
Could you please give me some guide how to run it on AWS?
On my local system, I simply run the command - node app.js and then go to ionic app folder and type ionic serve
Please, I'm finally stacked trying dozen of ideas and even Amazon Support could not help me, for some reason.
Elastic Beanstalk(EB) support node.js already but I didn't see angular.js in the list, and seems ionic is a plug-in/framework for angular.js (need you confirm) which is not included as well.
So here is my thought to fix your problem (I didn't implement it, and need your confirmation)
create new application in service Elastic Beanstalk with node.js as Predefined configuration platform
add EC2 key pair in ec2 instance. (it is important, with it, you can ssh and login the ec2 instance to check the error log)
Set the config file in EB, follow below documents.
Customize AWS Elastic Beanstalk with Configuration Files
Customizing the Software on EC2 Instances Running Linux
With the config file, you can customise EB and install the missing package.
Take a try and let me know the result.
More, if you can take time to read the documents about AWS Service Cloudformation and its template. It will help you a lot to understand how EB works.
I wanted to create a web app using node.js as a server and Ionic Framework as front-end framework, and finally run this everything on AWS ElasticBeasntalk
Ionic is written with AngularJS (very useful free course by CodeSchool). AngularJS is a library, which you upload to user's browser including it as <script/> There is no need to install it on the server environment.
Here is what I finally came up with:
You create your node application app.js - it's the server side.
Copy /www folder from ionic project
In app.js you need to through this folder and the index.html file to the server, which is initialized by your app.js
app.get('/', function (request, response) {
response.sendFile(__dirname + "/public/index.html");
});
app.use(express.static(__dirname, 'public'));
Now you have two .js applications - Angular (front-end) and Node (back-end) in one repository and running by simple node app.js command.
All you need to to do to deploy it to ElasticBeanstalk - create a package.json file, zip you project, create a Node.js environment and upload this version to your running environment.
P.S.
To zip properly - go into your folder and use zip -r 1.zip . command
P.P.S. package.son file sample:
{
"name": "myApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "4.10.6",
"request":"2.51.0",
"redis":"0.12.1"
----your libraries here ---
}
}