We are deploying the same image to different environments (dev, qa, prod)
We are hosting out nextjs application in azure app service and planning to read azure app settings as configuration
Could not find any help reading azure app settings from nextjs app
You can read azure app settings from nextjs app by following below steps:
First, navigate to the app service in your Azure portal where the app is hosted. Search for Application Settings and add a new setting value.
I created one called PORT.
Now,In your application that you are deploying to the app service, read the value as shown:
var port = process.env.PORT;
Related
I am currently trying to connect a frontend (React) to a backend (Express/nodejs) within Azure App Services. I am using Windows, since "Virtual applications and directories" are currently not available for Linux. However, according to my research, that is necessary in this case.
Backend sample: server.js
const express = require('express');
const app = express();
const port = 3003;
require("dotenv").config(); // For process.env
[...]
app.get("/api/getBooks", async (req, res) => {
const books = await Books.find();
res.send(books);
});
Frontend sample: App.js
const getBooks = () => {
axios.get('/api/getBooks')
.then(res => {
setBooks(res.data);
console.log("Got books: ")
console.log(res.data);
})
.catch(err => {
console.log(err);
})
}
Azure: Folder structure
site/server/server.js (Express)
site/wwwroot/index.html (React)
I successfully executed "npm install" via "Development Tools/Console".
The two are already connected via Virtual applications in Azure by using the following configuration.
Virtual applications
The app generally loads succesfully. However, the connection to the backend is not working.
How can I start the node.js server now on Azure and make the proxy working?
I tried to start the server via "node server" on the console. But this does not seem to be working.
I discovered two possible ways to solve this issue.
Assuming you have a client (client/App.js) and a server (server/server.js).
Serve the React App via node.js/Express
Based on the above architecture, a little bit of structure needs to be changed here. Because the React app is no longer output through its own server, but directly through Express.
In server/server.js, the following function must be called after express is declared.
app.use(express.static("../client/build"));
After defining some endpoints to the APIs, the last API node to define is the default route - the static output of the React build.
app.get("/", (res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
Using an FTP client, you can now create the /client/build directory that will contain the built React app. Of course, another directory structure can be used.
The client files from the built React app are then simply uploaded there.
The deployment from the server is best done via Visual Studio Code and the Azure plugin.
In the above structure, /server would then be deployed to your in the Azure extension (Azure/App Services --> Right click on "myapp" --> Deploy to Web App ...)
Create two App Services
For example: myapp.azurewebsites.net & myapp-api.azurewebsites.net
myapp must simply contain the built React app (/build) in the wwwroot directory. This can be achieved via FTP.
The deployment from the /server to *myapp-api is best done via Visual Studio Code and the Azure plugin.
In the above structure, /server would then be deployed to myapp-api in the Azure extension (Azure/App Services --> Right click on "myapp-api" --> Deploy to Web App ...)
Also worth mentioning is that CORS should be configured, so that API calls can only be made from myapp.azurewebsites.net. This can be configured in the Azure Portal.
Occasionally the node dependencies have to be installed afterwards via the SSH console in the Azure Portal. For me it sometimes worked automatically and sometimes not.
To do this, simply change to the wwwroot directory (of the /server) and execute the following command.
npm cache clean --force && npm install
Combine this with React Router
React Router is usually used with React. This can be easily combined with a static-served web app from Express.
https://create-react-app.dev/docs/deployment/#other-solutions
Excerpt
How to handle React Router with Node Express routing
https://dev.to/nburgess/creating-a-react-app-with-react-router-and-an-express-backend-33l3
https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-auth-code
I've followed this the tutorial linked above sucessfully, running it locally.
I can't figure out how to deploy into an App Service so I can host it in the cloud.
I would like deploy it through VS code and have installed the App Service extension.
Help?
You can login to your account and then deploy the Appservice as mentioned here
From the command palette (Ctrl+Shift+P), type "create web" and select Azure App Service: Create New Web
Create a resource group
Deploy to Appservice
I have developed a search engine app using express js and elastic search. Everything is working normally on localhost but when I deploy it on Heroku only express app gets deployed and elastic search client runs on localhost. So how can I deploy both of them together?
Simply speaking you will have to ssh into Heroku server and install an instance of elasticsearch there which is impossible if you're using free tier of Heroku. Other solution might be finding a cloud elasticsearch provider and update configs in your app to connect to it
I have a create-my-react bootstrapped application that is essentially a website that uses some FETCH API calls to a external API and it is deployed and works fine.
However, I added my own Nodejs backend, by creating a server and using using express for the routes/middleware. Everything works fine locally. I can hit my internal API endpoints (localhost:3000/myapiurlhere) and it performs an action on a database.
I have to run npm start to start up the create-my-react-app locally and then manually run the node server by node src/server.js then my internal API works.
The Azure Web App service is basically a preconfigured server with the Node RUNTIME on it, and it only seems to give you access to the D:\home\site\wwwroot folder (Windows server).
Do I need to find a way to run node server.js command on the server to start my node backend, or should it be running automatically? Also, I'm using create-my-react-app and npm run build , so it creates a build folder with a nested static folder.
I have started up REST APIs on Java on my Linux Ubuntu servers before but never on an App Service like Azure. How can I achieve what I'm trying to do?
Here is my server.js file:
const http = require('http');
const app = require('./app');
const port = process.env.PORT || 3001;
const server = http.createServer(app);
server.listen(port);
You dont have to do anything special, Have you followed this page on how to deploy basic nodejs app on Azure AppService?
One additional thing you need to do is that pass the Node version on appsettings of the appservice.
WEBSITE_NODE_DEFAULT_VERSION for the setting key.
Is it possible to turn the public folder of an ExpressJS web app into a client side ionic application that continues to connect to an express server hosted elsewhere? If so, is this a good practice?