How to deploy socket.io and React app to Azure? - node.js

I'm a total newbie to web development, so please guide me.
I've successfully finished a socket.io and reactjs website locally using tools like webpack and babel. There's one Nodejs server file(also has socket.io) and remaining all are client-side files.
I want to deploy this app to Azure using Azure App Services.
How can I achieve this?
Thanks!

You can try going through Create a Node.js chat application with Socket.IO in Azure App Service. For webpack application, you can check out my earlier post on SO.

Related

Azure AppService - How to connect and deploy front and back

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).

What are the best practices for GRANDstack installation in Azure?

I have to start a GRANDstack (GrapQL, React, Apollo, Neo4j Database) projet from scratch in Azure.
I know that for Neo4j Database I can install a Virtual Machine on Azure.
But for GraphQL, React and Apollo I don't know what are the best pratices to install them in Azure.
For example, do I have to install Azure app service, Azure functions ?
I don't know how do I have to put each component of GRANDstack in Azure.
Apollo can be hosted in Azure Functions or you can use a web framework such as Express or Koa which can be run in an App Service.
For the React component, if you're using an App Service, then you would host it out of the web framework you're using (Express, Koa, etc.) to host the static assets that are generated when converting the JSX to JavaScript.
Neo4j has docs on deploying to Azure.

React.js & backend on App Engine as services?

I am deploying a React.js front-end (built with create-react-app) and a back-end with a CRUD API that connects to Cloud SQL.
Is this a good way?
React.js front-end is a default service.
Back-end API is backend service
I'm familiar with deploying to Heroku, which had front-end and back-end on different ports. Would that work for App Engine?
This is all in Node.js.
I don't see any issues with the described design.
To get you on track you can take a look in Stack Overflow thread How to deploy create-react-app to Google Cloud or the following tutorial.
You can run applications on different ports with setting port forwarding in your app.yaml file.
The design pattern is good.
You only need to create a dispatch.yaml file which is only one per project.
Your dispatch.yaml file would look something like this:
dispatch:
- url: "*/backend/*"
service: backend
Then your frontend at project-id.appspot.com will simply make requests to https:/project-id.appspot.com/backend/ *, and these requests will be redirected to the API service.

Running Mongodb CRUD API on azure (for Ionic)

I'm trying to run a MongoDB (using NodeJS and Express) on the Azure Server as a server side part of my ionic app.
Once placed on Azure I'd like to access it with my Ionic App using CRUD operations.
What steps do I go through after acquiring a Azure Portal account? Do I take Mobile Services or a simple Web Api?
Is there something specific that I need to add to the NodeJS server?
Generally, the app using Node and MongoDB as the backend for mobile client hosted on Azure App Service, such as WebApps, Mobile Apps (recommended).
Based on my understanding, I think there are some documents that may be helpful for you, please see them below.
For Web Apps, you can refer to the tutorial Get started with Node.js web apps in Azure App Service.
For Mobile Apps, I think your ionic app was based on cordova, there is a tutorial for getting started with cordova Create an Apache Cordova app. And Two related blogs shown a sample of Node + MongoDB on Azure for mobile, please see below.
Exposing MongoDB collections on the node.js backend
Querying MongoDB collections via the Azure Mobile Service node.js backend
To deploy the app to Azure App Service, you can try to publish it via FTP, git, or IDE like VS, please see https://azure.microsoft.com/en-us/documentation/articles/web-sites-deploy/.
Hope it helps. Any concern, please feel free to let me know.

Google cloud - does anyone know how to deploy a node js app to a node js instance

Google cloud - does anyone know how to deploy a node js app to a node js instance.
I have a project with a node js instance running and I have a node js app.
I just need to know how to add the node js app to the cloud so I can navigate to my apps url routes.
Google Cloud has very good documentation and to answer your question, you can follow the Quick Starter Guide for a Hellow World App.
It's very simple and you can get it running in very few steps.
Disclaimer: I've no affiliation with Google nor Google Cloud, I'm just a happy customer.

Resources