Deploy create-react-app on Azure App services - reactjs

I am new to React and created a simple react app using create-react-app , it builds and runs fine on local. I created a Azure Build and release pipelines and tried deploying using App Services , refereed below Microsoft link to implement the same.
https://devblogs.microsoft.com/premier-developer/deploying-react-apps-to-azure-with-azure-devops/
Build and release pipeline runs successfully however when I click the Azure app services link to access the react app, I receive below message :-(
"This react-naturalone.azurewebsites.net page can’t be found
No web page was found for the web address: https://react-naturalone.azurewebsites.net/
HTTP ERROR 404"
Can someone please suggest what I am missing.
fyi, I am using react-router, hence added the web.config as mentioned in the link above.
Thanks
AOU

I'm thinking that there is a problem with your deployment pipeline. The first step for your here is to go to your Azure portal and open up your app service. From your app service, go to -->Development tools --> App service editor.
Do you see your code inside it? If you don't, you can confirm that the code didn't deploy correctly. If you do, then you have a misconfiguration somewhere in your app that is preventing anybody from seeing it.

Related

Cannot deploy a react app to azure app services

I’m trying to deploy a basic react app to Azure app services, but I cannot get it to work.
The app itself is the initial app created following npx create react app my-app command. I want to get this one working first before trying to deploy my actual react app.
The Azure App Service is a Linux setup, using node 16.
I’ve added “pm2 serve /home/site/wwwroot --no-daemon” as the startup command. I’ve also added PORT 3000 and WEBSITE_PORT 3000 in app settings.
Lastly I’ve added a web.config file to the react app itself.
Nothing I do seems to work though as it is not loading at all. I just get ‘application error’ if I try to open the app.
The only two errors i can see in the logs are:
“…didn't respond to HTTP pings on port: 3000” and “… did not start within expected time limit”
My deployment is set as continuous via git hub, though as this is building without an issue I think the problem must be something in the Azure App Service settings but I’m lost as to what.
Does anyone have any ideas to fix this?
It could be that there is no access to port 3000 in the app service.
It depends on how you have set it up what needs to be fixed. It could be the network settings on the app service. If your app service is on a VNET then it could be the settings on the VNET that need to be updated.

How do I change the deployment web page in Google App Engine?

I'm trying to change the entry web page that gets launched in my Google App Engine deployment. It's a simple J2E web project, using IntelliJ with Cloud Code plugin. The default deployment points to 'index.jsp', which gets automatically created with the project. I want to change that, to point to a custom form I have built, e.g. 'form.xhtml'.
Steps I've been through so far...
Created base Google App Engine (Standard)
Configured GAE localhost
Configured GAE deployment server
I can do this easily on the localhost server, by just changing the server URL, e.g. from http://localhost:8080/ to http://localhost:8080/Ex_1.xhtml
I can't work out how to change this on the deployment server though. There's no URL option like there is with localhost. As a result, when I deploy my code it still just launches the default index.jsp.
I've looked through the GAE deployment descriptor documentation, but it doesn't mention how to do this. I'm sure it's a very simple change, I just can't put my finger on it.
Can anyone help?
I've resolved this, in case anyone else has a similar issue. You need to add the 'entry page' into web-xml, using the 'welcome-file-lists' tag. For some reason Eclipse adds this automatically but IntelliJ doesn't. If this isn't added, the App Engine deployment server points to the default index.jsp
<welcome-file-list>
<welcome-file>my-entry-page.xhtml</welcome-file>
</welcome-file-list>

How to see if gatsby-plugin-offline is working

I am new to Gatsby so please bear with me.
I want to add offline support to my app such that if a user were to try access it while offline (after having visited it online) it would still show up.
Would gatsby-plugin-offline help me achieve this?
If so, how can I try this out? So far I have tried using the plug-in in my app (all default settings), building the app and then serving it locally on my computer at http://localhost:9000/. When I stop the dev server and try access http://localhost:9000/, it does not show up. How can I test to see if this plugin works?
After gatsby build the public folder should include sw.js file.
Otherwise, you can find whether the service worker is registered on not at Chrome Dev Console over Application > Service Workers.

How to deploy React App on production with Server Side Rendering

I have created my application using create-react-app. It is working fine with SSR. Everything is in place but I don't know how to deploy it?
What I ideally want is :
Generate a build folder and will upload in cdn. Want to serve my static assets from there. I want to create a distribution from my code and take that to another machine to deploy. I am not able to figure out how to do highlighted part. How can I create bundle for server? npm run build creates my bundle for client.
PS: I am using React libraries like React Router 4, Redux.. in my application. Hope this does not affect my answer.
For SSR , I have used express.
Server side rendering means you need a server (which is express) that will serve all the requests: server-rendered pages, including the static assets. So CDN is not enough.
You might want to try following free cloud services that support Node server:
https://zeit.co/now
https://www.heroku.com/
https://firebase.google.com/docs/functions/
You can create server bundle using Webpack, with target: "node" and use https://www.npmjs.com/package/webpack-node-extenals.
The details can be complicated, so you can just visit https://github.com/antonybudianto/react-ssr-starter/blob/master/config/webpack.server.config.babel.js for the reference.
I tried whit Firebase, but I can't, In the function's documentation says that execute the function can't be more than 60s, and my function takes more.
When I deployed other basic functions, it deploys without problems.
And If you achieve deploy it, give you a status 403, because you have to put the function in public mode.
If you want to deploy an app whit SSR make it whit Express, like in my case, you can deploy it like an API.
You can deploy it too whit Doker using AWS or Google cloud.
Heroku is the easiest way to do it, but I don't want to have all my apps here.

App Engine works when access by version specific url, but not by the main url

The Problem:
I can access my Cloud Endpoints API via the following version-specific URL:
https://[version]-dot-[myappid].appspot.com/...
but I can't access it via this main URL:
https://[myappid].appspot.com/...
the error I receive in the chrome console is this:
https://[myappid].appspot.com/_ah/api/discovery/v1/apis/userEndpoint/v1/rpc?fields=methods%2F*%2Fid&pp=0 404 (Not found)
What I've done:
First off let me say I'm very new to App Engine so apologies if this is a silly question.
I've created a Google Cloud Endpoints Backend module as part of my project in Android Studio (v0.5.6) which uses all the new gradle stuff and Objectify annotations.
I've tested my back end locally on the dev server and it all runs fine.
I then deployed it to appengine using the gradle task appengineUpdate and all went well.
I deleted previous version instances running in my app engine cloud console and made the newly deployed version (version-2) the default.
I can access and use the endpoint API fine via the version specific URL as described above but not via the main url.
I have a simple index.html file which is using the endpoint via the javascript client library to test with before building client libraries for my android app.
On both versions of the URL the index.html file renders properly, it just can't connect to the API.
If anyone knows how I can get the app to run properly on the main URL (or let me know if it's not supposed to) that would be awesome!
Many thanks!
Solution was to use appengineUpdateAll which calls both: appengineUpdate and appengineUpdateAllBackends my bad!

Resources