I have a nextjs react website running fine locally, after I ran 'next build' I got a .next file. I tried uploading the contents to azure app services but when I visit the URL I get an error that I don't have permission to view this page.
From googling the issue I've found that I need to install something on the azure app service: https://github.com/MRCollective/nextjs-server-azuresiteextension - "Install the nextjs-server site extension (either via the Portal or programmatically via ARM)" but I don't understand what that means or where I can find it (extensions in portal and site extensions does not have nextjs-server)
Related
i have a react site that am trying to deploy to azure app service (free tiers windows) plan.
i am using VS-Code's Azure App service extention.
when i right click deploy to web app i get the error
11:44:47 AM amn-react-app: Starting deployment...
11:44:47 AM amn-react-app: Creating zip package...
11:53:39 AM amn-react-app: Zip package size: 298 MB
11:53:40 AM: Error: An error has occurred.
where to see the deployment logs to check what happened ?
update
following the update below i was able to see logs but they still not telling details.
I use vscode create a sample react project to test.
And I found, we can check delpoyment logs on portal.
Method 1
Method 2
I also try to use rest api to get deployments info, but failed because I don't find deployment id. If you are interested, you can also try.
Web Apps - Get Deployment
I managed to deploy my react app with an Azure CD pipeline on an Azure App Service. And the pipeline throws no error.
Unfortunately when I click browse on the Azure app service I get this message "You do not have permission to view this directory or page."
I enabled advanced logging and here is what I get:
Here is my web.config file content:
[![enter image description here][2]][2]
Any hint on how to solve this issue?
You do not have permission to view this directory or page
The root reason is that there is no default page in your Azure website. You can try to directly view the page with following url.
https://{siteanme}.azurewebsites.net/views/login.html
Or you could add the default document in the project root folder and set it as default page in appsetting on the Azure portal and save the setting.
The default document is the web page that is displayed at the root URL
for a website.
In addition, you can check the IP restrictions or authentication settings on the Azure web application that may block you.
Check Web App > Authentication /Authorization and Web App > Networking > Access Restrictions
Here is a blog about deploying create-react-app on Microsoft Azure, you can refer to.
Created the production build by executing npm run build command. A
build folder got generated in the solution with some meta data files
Once connected via the FTP client, copy the entire content of the
build folder created earlier into the /site/wwwroot/ folder on your
Azure Website
I needed to configure the following in Azure Web App Configuration:
index.js as a Default Document
change the virtual path to \site\wwwroot\build
I've developed an PoC about PWA (Progressive Web Apps) using ReactJs to show how to use camera, geolocation, microphone, light sensors and etc from Browser API.
I've created a route for each feature in this web app and everything works fine in localhost. But when I deploy the npm build version of my react app on Azure Wep App Linux service it don't work properly. I can access the main page (index.html) and from there I can navigate to any other page, but when I try access any route direct form its url I receive an 404 error. Except from index page all urls don't work when refreshing or writing manually.
Ex:
https://pwa.mypoc.dev/ -- Works fine
https://pwa.mypoc.dev/lights -- Do Not Work
I'v used this command on azure "Settings" > "General settings" > "Startup Command":
pm2 serve /home/site/wwwroot/build --no-daemon
I've found a question related to it but the answer did not help me, as I'm not using web.config because it is a Linux machine running Node 10 LTS: React App not starting in azure app service
After a little more research I found the problem. As Linux Azure Web Apps uses pm2 to serve a node app I found the answer looking into the official documentation.
PM2 is a daemon process manager that will help you manage and keep your application online. Getting started with PM2 is straightforward, it is offered as a simple and intuitive CLI, installable via NPM.
https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml
Just need to add the --spa option into the Startup Command on Azure Web Apps Linux General Settings:
pm2 serve /home/site/wwwroot/build --no-daemon --spa
Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.
I am currently trying to deploy the default react web app to Azure and I am encountering an issue where though I deploy the contents of my build folder to the azure hosted /site/wwwroot folder I end up on the following page when going to my hosted address: https://[project_name].azurewebsites.net/
Landing Page :
I intend to deploy the default create-react-app react application so that I may have the process down for when I deploy my real site.
The process I have followed is pretty much exactly what is mentioned in this article https://medium.com/#to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321
Create the default React App with create-react-app
Run "npm run build" to get the build folder
Go into the Azure React Portal and create a new Web App ***
FTP / Git deploy the contents of the local build folder into the Azure website's /site/wwwroot/ folder
For overkill I added the below web.config file to handle future routes, but have also tried without this step
In the end my Azure site's contents look like this
Folder contents :
At this point when I try to access the Azure site I get the "Hey, Node developers!" page which implies my code is not deployed. Any thoughts as to why this might be the case?
*** I have a hunch that during the configuring of the Azure Web Api something is not set up correctly perhaps because I select Node 10.14 as my Runtime stack simply because that is the version of Node that I have installed and am using with my local React app.
Thank you folks for your time.
Another approach is to configure Azure Linux Web App Service to run a startup command to serve your React app in "Settings > General settings > Startup Command":
pm2 serve /home/site/wwwroot/ --no-daemon
Remember to change the path to your build path (The path to your index.html file).
If you use react-router and wants to make any direct access on custom routes be handled by index.html you need to add --spa option on the same command.
pm2 serve /home/site/wwwroot/ --no-daemon --spa
Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.
You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml
I've coped with the same problem recently: React router direct links not working on Azure Web App Linux
You have created a Linux App Service - your web.config won't work because there is no IIS.
If you don't select node as the runtime stack, your app will work for the most part because it serves the files like a static web host. However I would suggest to keep the runtime stack as node and add the following file to your deployment in the wwwroot folder:
ecosystem.config.js
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff
There's an extremely simple way to overcome this problem, and although it is not perfect, it works both on AWS, Microsoft Azure, and probably any other hosting:
Just point the error document to: index.html
I found it out here:
https://stackoverflow.com/a/52343542/3231884
Disclaimer: This solution is not perfect and impacts SEO. Google doesn't rank well sites that throw 404s.
So I finished the Tour of Heroes tutorial. I understand it and can alter and have fun and what not. Got a git repository from Visual Studio Team Services for the app. Now here is where I'm lost I just want to build web based apps for now. How do I get the app on to my hosting to display as a website. I can't seem to find any tutorials (or once that I can understand) online for this.
If anyone can help with this or point me in the right direction it would be greatly appreciated.
Thank you
You can refer to these articles to deploy angular app (part 1 and part 2).
Simple steps:
Use NPM and gulp build tasks to build and package your app
Deploy package to azure or IIS.
There is IIS Web App Deploy task in IIS Web App Deployment Using WinRM extension, so you can install this extension and deploy packaged app to IIS if you want to deploy app to IIS.
Your hosting provider probably gave you a FTP access to a root directory for your website.
Upload the project over there and make sure there is an index.html file there, that pulls all the relevant JS files into place.