I have an Angular app that connects to several Nodejs apps. Each of these apps are in different repos.
Frontend
/ \
Backend1 Backend2
In the Angular app we have a typical environment.ts and several environment.<env>.ts In each of these files we have the URLs to the different backend services that we make calls to.
I would like to setup the heroku preview app for each repo when we make a new Pull Request in any repo(I think). In many usecases I have the normal preview apps working fine.
✓ Make style changes in the angular app
✓ Make a change to the computation of data in one of the back end services
✘ Format data in a new way to display in a new component
This example creates a new change in the Backend1 service and the Angular App
The preview environment for Angular app will use the normal Backend1 URLs and not get the changes from the new Backend1 Preview app.
Somehow the environment.ts needs to change or a environment.<preview_id>.ts needs to be created and used in the build.
Is there any configuration for this or am I looking at some heavy devops work?
Related
I'm absolutely new to Azure, CI, and CD.
I have an app consisting of a frontend developed under React + Typescript which sends CRUD requests to a typescript backend. Both front and end are NPM projects.
I've no idea on how to step from development environment to production, deploying to Azure.
Should I create two separate AppServices, one for each project?
If that's the case, how do I then connect them?
Do I just need to change the URL the server listens to?
As you can see I've no idea of what I'm doing but I'm eager to learn so any feedback is much appreciated
The most common approach is
Deploy frontend app ( react ) in one app service.
Backend nodejs app on a different app service.
Then, call the api of the nodejs app from the frontend.
Or,
Set up and run the client and server on the same server using a gulp file and deploy that project on an app service. In that case, there is no cross-site communication. This is the most preferred one.
Using the same app service for both front end and back end application. Refer nodeexpress-backend-with-angular-front-end-in-a-single-azure-web-app.
Using Cors to connect front end and backend Check here
Refer SO Link 1 & Link 2
And You can use deploy staging slots in app service to use different environment like (test/dev, Production).
I have a react native app that I'm building using expo. For the backend, I am using node.js and Express.
My app hierarchy is such that I have a frontend folder and a backend (server) folder. For example,
Root
|
|Frontend
|Various screens & associated files
|Server
|Routes & other files
For my project, is it possible to just host the backend and not the rest of the app? Such that when I fetch data in the frontend using HTTP requests, instead of routing through localhost (http: //RandomIP:PORT/route) I would use the heroku address as the routing address. I would also host the SQL database along with it.
I tried to follow along with the Heroku documentation, but it seemed like that was for hosting the entirety of the app / web apps instead of mobile, and I ran into constant errors.
I would like to point out that, unlike web pages, mobile apps cannot be hosted on the server and fetched on-demand. In other words, do not try to upload your react-native code to Heroku instead just upload your backend only and then make HTTP requests through the URL provided by Heroku after you have deployed your code.
Therefore go into your backend codebase, initialize a git repository and just deploy that Heroku. Also, you will need to host your SQL database on another service such as Google's Cloud SQL or Amazons AWS Database Services.
I have built a web app that has a Vue front-end and an express back-end.
I am trying to host these on an Azure Web App Service but I am a complete novice with Azure.
I have gotten the web app working fine when I place the Client side in one web app and the Server side in a different one.
I want to have both running in the same web app.
From researching online it seems that I need to go to:
my web app-> configuration-> path mappings ->Virtual applications and directories.
I created a new application with Virtual Path "/app" and physical path "site\app".
I deployed (using visual studio code) my back-end to my azure web app and thus this sits inside wwwroot.
In filezilla I create a new folder in the site directory called "app" and paste in my built Vue client side.
However, when I try to navigate to www.myapp.azurewebsites.net/app I am not presented with the expected Vue index.html rather a 404. If I just navigate to www.myapp.azurewebsites.net/ I get the default route from the server side as expected.
What am I doing wrong?
When creating a webapp, please choose Windows operating environment, because currently choosing Linux does not support Virtual Application and directories.
The directory structure should be like below.
Setting in portal.
For more details, you can refer my answer in another post.
I have an web app running on azure with node js. Deployed some changes to the appservice. Also verified the changes in using kudu console. js file changes are already there. But nodejs app is still serving the previous api implementation.
I resterted the app service, still no luck.
App 1: I have a React app (based on create-react-app) which I've added as a Web App in Azure - that was pretty straight-forward to setup. This is using the JS SignalR client to communicate with the server, mentioned next.
App 2: This app is the ASP.NET Core SignalR Server application created with dotnet new console. This app exposes a SignalR endpoint and is "self hosted".
App 3: A 2nd ASP.NET Core console app is setup as a SignalR client. This is responsible to fetching some data, and sends those data to the SignalR server. This takes the SignalR endpoint (url) as a commandline argument.
Running all this locally is pretty straightforward:
App 1: npm start / serve -s build
App 2: dotnet run -commandline args (runs on localhost taking a hubpath and port from the args supplied. The port is so that multiple instances SignalR servers can run on localhost - not sure if this is the way to do it in Azure or if they're differentiated with separate urls and hosted seperately there)
App 3: dotnet run "http://localhost:5000/somenotificationhubname"
I've added a bat file in each of the console apps, so I can open multiple instances of those, with different args.
So locally it runs as easily as clicking 3 bat files.
But I'm kinda lost on how to host all this in Azure. The web app seemed pretty straightforward. I just created a web app in Azure, connected to it through an FTP client and copied over the contents of the build folder from the React app.
But what to do with the ASP.NET Core console applications so that the SignalR console app will be hosted in Azure and has its endpoint exposed for the other 2 apps to consume?
I tried adding both both App 2 and 3 as webjobs under App 1, but that didn't seem to work.
I've also heard that SignalR should not be running on IIS, so would it make sense to make it self-contained (exe) and run it inside a docker container? Any help is much appreciated.
I will suggest to change your app to use AppSettings file for configuration values instead of the commandline args.
You can easily change the value of appsettings without redeploying or changing anything.
You can have multiple appsettings file based on environments.
Allows you to easily duplicate the app with same code but different appsettings for your multiple signalr server.
This will make it easier to deploy using the standard publishing wizard in Visual Studio or via command line.
You could try the publish Profile in Azure App Service with the help of Visual Studio,
Reference 1
Reference 2
Once you successfully publish your webApp. You can double check the deployment using kudu service (or) App service editor
Advanced Tool-KUDU
AppService editor