I have a react.js website with a backend in Node/express hosted on Azure, right now the project is monolithic, every time I do a change in the front or backend everything is redeployed in production. What I would like to achieve is to be able to deploy the frontend and the backend independently from one another whenever I push a change on github, but also if they are both affected deploy them together to avoid inconsistencies. Do you know some best practices or services to achieve this? Thanks
The git deployment method of Azure app services is simple. However, as long as we modify the file, all deployment commands will be executed and the entire deployment process will start. This cannot be changed.
Based on your description, I probably know that your project is a fusion of front and back ends, without separation of front and back ends. So I guess, you want to use the same app services for the front-end app and the back-end app.
So I suggest that you still separate the front and back ends of the project. This is the mainstream. It is also convenient for later maintenance and expansion. If you just want to use a webapp service, you can use a webapp based on the windows environment, and just use a virtual application. In this way, the update program can be completely separated without any impact.
Note that at present I found that the virtual application does not support the react project and has raised a support ticket to confirm. If have any progress, I will tell you.
Related
I want to build a web app with React for frontend and Node.js for backend. The problem comes when choosing the type of hosting I need. I know that for static files(eg. html with css and js) it's enough to have a standard web hosting, but if I want to have a server running Node.js app, do I need a dedicated server or VPS? Why?
I believe you can have either. Are you trying to do this professionally for a client or for a side project?
Personally, I use services like Heroku or Netlify (others here: https://blog.bitsrc.io/8-react-application-deployment-and-hosting-options-for-2019-ab4d668309fd). They run builds of node for your app and are free initially.
You can host your app and publish it for no cost at the beginning. However, on something like Heroku, if you don't pay, it takes 5 seconds for your website to wake up. But, this is great for prototyping. It gives you a URL so others can see it. They are basically version control systems that publish what you currently have. So you can just live push your project at any time and it updates your site.
If your prototype is working and you want it to be a fully dedicated app, then you can either pay or find services that host it. I would recommend prototyping first regardless and wouldn't pay until you need to.
I have developed an application which is using REACT for front end and ExpressJS(framework for nodejs) for back-end. Code is running properly in my local machine.
I have no idea about hosting this application so that other people can use it.
Note: Both REACT project and Node project must be running parallel to make this application work
Appreciate your help !!
You can use this one https://www.heroku.com
It's a popular platform. It's free for a limited amount of space, so it's good to try out applications. It's pretty easy to use, you can even auto-deploy your app every time you push it to github repo, if you have one.
I'm developing my first node.js app deploying to GAE.
It'll be organized as an API service and a front-end web app developed with Next.js
I'm looking at this architecture, and, although I have the app separated in two repositories I could have one merged repo to create two different microservices:
https://medium.com/this-dot-labs/node-js-microservices-on-google-app-engine-b1193497fb4b
For me, it seems overwork creating a new repo to merge them and deploy (doesn't it break one of the basic ideas of microservices to make isolated deploys?)
I have to discourage this because we need SEO in some of the parts, and We should use Next.js (or similar):
https://cloud.google.com/storage/docs/hosting-static-website
Another idea I've been working on is... create different GAE projects for front and API to deploy independently. For me, it seems like the best option, but I would like to know your opinion as GAE experts.
Which one should I use?
Thanks!
GAE doesn't care how is the code to be deployed into the services mapped to one or more VCS repositories (or no repositories at all). That's entirely up to you.
With a single repository you may encounter difficulties deploying from CI/CD pipelines - for example unnecessary deployments to one service when only the other one is changed.
Many examples out there focus on applications rather than services, but those are nothing more than the default services of those applications. Personally I like keeping the code for different services in separate directories, see the image captured in Can a default service/module in a Google App Engine app be a sibling of a non-default one in terms of folder structure? (it's no longer present on the updated documentation page). This also allows for easy mapping to multiple, separate VCS repositories
As for multiple projects vs multiple services, this might be of help: Advantages of implementing CI/CD environments at GAE project/app level vs service/module level?
The static website link you mentioned isn't part of GAE, it's part of GCS - a different GCP product. It's fine to use by itself - for a static website, but it might be difficult/impossible to:
communicate between a service running on it and one running on GAE - if you need that
make the 2 services appear as one (for example serve under the same custom domain name)
I have an Angular4 web app, deployed on Azure. Now I want to deploy this app to other environments on Azure: one for testing, one for acceptance and one for production. Every environment has different API endpoints and may have other variables, like Application Insights. All those environments run Angular in production mode.
The way Angular advises you to do this, is by the Enviroment files (environment.test.ts, enviroment.acc.ts, environment.prod.ts). I could configure all the different API endpoints in those files, and run my build with --prod for production for example.
But that is not the way I want to do this. I want to use the exact same application package deployed to test for my acceptance environment, without rebuilding the project. In Visual Studio Online, this is also really simple to configure.
The point is: how can I make my API endpoints differ per environment in that way?
The way I want to do this, is by the App Settings in Azure. But Angular can't get to those environment variables because it's running on the client side. Node.js is running on serverside and could get those App Settings - but if that's the way I need to do it, how do I make Node.js (used in Angular4 CLI) to send those server variables to the client side? And what about performance impact for this solution?
How did you fix this problem for your Angular4 apps on Azure? Is it just impossible to fix this problem with the Azure App Settings?
For everyone with the same question: I didn't fix this problem the way I described above.
At the end, I did it the way Angular wants you to do it: so rebuild for dev, rebuild for acc and rebuild for prod.
In Visual Studio Online, at build time, it builds and tests our code and it saves the uncompiled/unminified code. At release time, it builds en tests it again and releases it to the right environment with the right environment variables (--prod for example).
I don't think there is another way to fix this.
The solution is pretty old school but it works! Although you can use branching or tag for this purpose instead of cloning the code to the package.
The best solution as you said is Azure app settings will be saved as environment variable so you should implement an API with node.js and share the variables you want.
Of course there is an impact because of additional http call, but it's just one time at application start which is about max 5ms and depends on each program policy whether is impact or not.
Another option could be move the variables to the JSON file in the asset folder, and change it at deploy runtime with release pipeline. that's easier implementation but the disadvantage is you will have to use release variables instead of app settings and if you have config changes you will have to update the variable value first and redeploy it, although that works most of the times but sometimes you want to change just like a connection string and you will have to redeploy.
I am wondering what are your best practices for a Single Web Page app project using the MEAN stack (MongoDB, Express, Angular and Node.js).
Right now we have the following organization:
One Git repository for the Angular Client side code
One Git repo for the node.js & express server side code.
I saw browsing some blogs and checking node.js boilerplate that a common strucure is to have only one repository to handle Angular Code and Server code.
I'd like to know, from the community, if this approach is really better than having 2 difference repo in terms of versioning, easy to deploy etc...
From my personal point of view, I don't see that much difference...
I don't see much difference as well. It should actually be driven by the team. Your code organization could be beneficial if you had a separate front-end and back-end teams. I've seen an environment when UI guys only downloaded UI portion and hooked up to REST back-end deployed somewhere on DEV server.
Number 2 is release procedure. If your front-end and back-end are tightly coupled they will be released together for 99%. Then you don't need to handle 2 repos. However if your back-end will serve as REST service end-point for other clients, not only your UI and you plan to release front-end changes without touching the back-end (no downtime for external clients) you may want to use two separate repos.
Also think about your CI server. You may want to run front-end an back-end builds and tests separately. However for most CI servers it does not matter either it is one repo or two.