Deploy Next.Js React App to Azure App Service - azure

I created an Azure App Service running Node 16 on Linux. I ran next build and moved all files and folders that were generate inside the .next folder to the Azure App Service. Unfortunately, the app isn't running. I feel like I am missing some configurations or startup commands on Azure to successfully run the app. I would appreciate some help from somone that was able to deploy a NextJs app on Azure App Services. All other articles that I found were not able to solve my problem. This might be due to changes on the Azure platform.

Related

Can I run my Azure Static Web App and ASP.NET web API locally?

In Azure, I have a Static Web App and an ASP.NET web API (running in App Service).
Following this guide on Microsoft learn https://learn.microsoft.com/en-us/azure/static-web-apps/local-development, I know it's possible to run a static web app and an azure functions API locally, but I can't find anything about a different kind of API.
When I run the CLI command " swa start dist/MyApp.front-end --api-location 'C:\GIT\MyApp.Backend'" I get the error:
[api] Unable to find project root. Expecting to find one of host.json, local.settings.json in project root.
This makes sense... because my project has appsettings.development.json instead of the local.settings.json, but I was hoping it was smart enough to use the other files.
Does anyone have any experience with running a static web app and asp.net api locally with the static web app CLI?

NestJs deployed to Azure Linux Web App wont start

I have spent many days but still can not get this to work.
I have setup a deployment pipeline for NextJS I have the dist folder and I'm also copying the node modules folder etc. The build pipeline works, makes a package which is then deployed to a Azure Linux Web App.
Problem is can not hit the application
I look into the logs and I can see the app has started but for some reason the container fails and the site never works.
I'm pulling my hair out here I have tried everything, read every guide I can find but nothing seems to work. Help me stack-bi-wan-overflow your my only hope.
As you have confirmed in your comment , Converting this to answer to help other community members.
To achieve the above requirement make sure that you have used express instead of using fastify . As fastify must have different network configuration which can not connect with container.
For more information please refer the below links:-
SO THREAD: nestjs to azure windows app service - web.config settings & Angular CLI app not running when deploying to Linux App Service
Blog:- Deploy and run Nest js app to azure

Why can't I access my Azure website after successful deployment

I build a website with React and I deployed it on Azure. I build it and then deployed the build folder with vs code on Azure. The process is actually very easy using VS Code and the Azure extension. It is explained well here.
So far so good, everything worked fine. Now I needed to deploy the same app (the same build folder) but in another webApp. Basically, I needed to have separate versions of the app. So, I did the same things I did the first time (create webapp on Azure -> deploy with VS Code). However, I can't see my website when I go to the url. All I see is the default generated webapp, which is a dummy html page.
It looks something like this:
Hey, Node developers!
Your app service is up and running.
Time to take the next step and deploy your code.
I am seeking to understand this: I deployed the same build folder. I didn't change anything. I can't see my website (I thought it may take some time but I waited for nine hours now)
Things I've tried:
deploy again and again
restart the app on azure
stop and rerun the app on azure
go to the URL on incognito mode
I searched a lot and I've seen some answers that it can be about some path or file in the Azure configurations. However, I don't have anything in my configurations. Here are screenshots of my app configurations on Azure
here is my app configurations (when I go to configurations on Azure)
and these are the general configurations/settings
here is the deployment slots:
The message you are getting is the standard message when the app service is created but nothing is deployed.
Possible explainations are:
the app is being deployed to a different site
the app is being deployed to the same site but a different slot
the deployment is failing
your application is not listening on the port provided by the PORT environment variable
Recently I got into same issue,
Check you node version in package.json. I used this,
"engines": {
"node": "^12.16.3"
}
Azure web service was on Linux server. Startup commnand required in Azure General Settings -> Stack Settings
pm2 serve /home/site/wwwroot --no-daemon
You can also look at the log metrics after deploying or start the service. It will provide you info on the issue.

Deploy vue.js Quasar App with Azure Portal

I am trying to deploy my Quasar app through Azure Portal. I have created a web app service, connected my github repo through the Deployment centre, and ran the build and deploy github workflow successfully (note: my npm run build calls quasar build which the Quasar docs describe). When I use FileZilla to access my server, I see my entire app along with the dist/spa folder under site/wwwroot so I believe the build worked correctly. Unfortunately, when I try to access my app through the browser, I am welcomed with the default Azure webapp page rather than my app.
Default Azure WebApp Page
I am unsure why my files are not being served. I have deployed a very simple Nuxt.js app in the past using the same approach and managed to deploy it relatively quickly. Perhaps nuxt.js does something under the hood that I am not aware about.
Any leads will be greatly appreciated.

Deployed Node.js app on azure web app using VSTS. After successful deployment, app code file are not available on web app directory structure

Deployed Node.js app on azure web app using VSTS, status showing successful but code files are not visible if checking through Kudu terminal.
In logs it showing succeeded status. Anyone faced such issue ? Looking for resolution.

Resources