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.
Related
Being kinda new to React and everything clientside related, I am trying to build a Electron application with React.
At this point I can't tell if that's a good idea, but I wanted to try it.
Currently it works fine (see Github).
However I now wanted to add #react-oauth/google to give users the option to sign into their Google Account to allow the application to access their google drive and I'm struggling with that.
See the testing_auth_2 branch for that.
I enabled the drive-api in GCP and created credentials for a web application, adding http://localhost and http://localhost:3000 as authorised Javascript origins.
Now it works, but only when I start it as a webpage (npm start in my Github)
Starting it as an electron app failes, probably because electron doesnt run under localhost somehow (npm run electron:dev in my github code).
I tried creating Desktop and ios credentials since those dont ned authorised origins but the error persists.
Steps to recreate:
Enable drive api and create credentials in GCP
clone git#github.com:Urr4/electron-archive.git
checkout testing_auth_2 branch
Replace XXX in index.tsx with the client_id
The Google login should work using npm start, but not using npm run electron:dev
Any help is appreciated
I have created sveltekit/pocketbase project that I would like to deploy to Linode to run under subdomains:
backend.mydomain.com for pocketbase
appname.mydomain.com for sveltekit
First I deployed pocketbase and I'm running it with systemd service which is working fine.
But there's problem when I want to deploy and run sveltekit app. I was following this article on how to run svelte app on linode using pm2 and caddy. But there's problem because 443 address is already in use. When I turn off the pocketbase.service I can run my svelte app.
Now I know I should probably use reverse proxy for pocketbase, but I'm new in this and a bit lost in all the information. Any tips on how could I achieve this?
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.
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)
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.