I'm trying to get a React app running in Azure App Services and having difficulties getting environmental variables to work.
Locally
When running locally I'm using a .env.local file to load environmental variables (which isn't checked into git).
REACT_APP_SERVER_URL=http://localhost:5000
I can then use it in my application by referencing it using process.env.REACT_APP_SERVER_URL. Everything is working as expected.
On Azure
Now I'm trying to get the same thing working in Azure. I've setup configuration using Application Settings (described in their documentation here and here).
I can use kudu to get to the debug console and see that the environmental variable is being set.
But using process.env.REACT_APP_SERVER_URL is not pulling in that value. If I console.log(process.env) my url isn't doesn't show up.
My React app was created using the create-react-app cli a couple days of ago. My React App is deployed via github actions with the following startup command: (pm2 serve /home/site/wwwroot/build --no-daemon --spa)
From what I've read online it "should" just work, so I'm not sure what the breakdown is. My thought is something with pm2 might be blocking environmental variables, but not sure.
This guy seems to be having a similar problem to me, but no answer is elaborated on that question. And I don't want to store config in package.json, since that's what Azure Config is suppose to help me do.
A react single page app is, from an infrastructure perspective, just a bunch of static files - HTML,JS,CSS, whatever. It cannot reach into the server to read those variables because there is no server side code running.
You're going to have to bundle your environment variables, whether inside .env or package.json or wherever.
Related
My react frontend SPA has some environment variables I would like to pass at deploy time using the Static Web App Deploy task in Azure ADO.
If I'm doing this in a pipeline, it's simple to add directly to the YAML https://learn.microsoft.com/en-us/azure/developer/javascript/how-to/with-authentication/static-web-app-with-api/deploy-static-web-app-to-azure#add-react-client-environment-variables-to-workflow-configuration-file
However, within the "Releases", I don't see where I can add these env variables since I can't directly edit the YAML file.
My questions are:
Is this not possible? Is this limitation due to the fact the Deploy Static Web App is technically still in "Preview"?
Is it possible to write a custom Task/YAML code to run during the release? I would prefer to keep the CD in the Releases section so I can keep approvals/rollback functionality, rather than just make a multi-stage pipeline
Is there a better or more correct way to pass these environment variables? They are not secrets, just for example the API URL. Passing as env variables would allow me to break up deployment into dev/prod and pass different values for each environment.
Thank you!
So this will be a brief explanation since I've got no idea what is going on or how to solve it. So lately I've been asked to work on a project (React frontend) that uses amplify with Cognito for auth, the only problem I've had lately is that my local environment does not do the authentication for some reason. I've noticed that the prod website whenever it does a request for Sign In uses a certain ClientId but in my local enviroment uses a whole different one. I know for a fact the code is the same in prod and in my machine since I've done a lot of tests with amplify. So does anyone have a clue what is happening or what to do to make it work locally?
When we work with Amplify there are certain steps that needs to be taken to setup the local environment. Your amplify project must first pull down the resources that it has created. In your case the Cognito Auth resource.
To do that run the command amplify pull this will read the team-provider-info.json file in your amplify project and build the configs required for you to work locally. This is under the assumption that you have after pulling the code down initialised the amplify project using amplify init command.
The following docs should guide you in this regard Docs
To begin with - let us suppose we have a React application. We want to build it and deploy to 3 environments - dev, test and production. As every front-end app it needs to call some APIs. API addresses will vary between the environments. So they should be stored as environment variables.
As every modern, progressive developer we want to use containers. In particular Kubernetes.
We want to build our web application and deploy it on K8S cluster. The container image should be built and kind of sealed for changes, then before deployment to each particular environment the variables should be injected.
But it seems there's one great impossibility here. When it comes to .NET apps for example, when we have .dll compiled, it reads a config file in the runtime. It's not a case with React. After we generate build we have just static files. The variables are changed to static values in the process of building React app. It seems there's no way to update it after that point - or is it?
The way you are trying to solve your problem is not correct.
You don't need to know anything about the addresses of the backend services in your react app. Only the frontend server/gateway that is serving your react app needs to know about the backend services. Any request from the react app should be proxied via the gateway.
See API gateway pattern - https://microservices.io/patterns/apigateway.html
You can use config map to store the API endpoint address and refer it as environment variable in the pod.
If you want to change some values while the pod is running you can mount the config map and any change to it will be synced in the pod
I am new at Google Cloud and I would like to know if there is a way to edit only one file inside of an App Engine application.
This is my problem:
I am migrating from a normal hosting to google cloud and I am having some problems with my PHP code, I am using the same version like locally but I am getting some error in the cloud, so I need to change 1 or 2 files, update them and test the app, so is there any way to change that file directly on the server? To deploy i am using this command:
gcloud app deploy
But it takes about 10 minutes to deploy so is too slow my testing. Any suggestions?
Thanks.
Leandro
For the standard environment the answer is no, you need to deploy a new version of the app to modify a file. So the advice would be - make the most of testing your app locally. See somehow related Google AppEngine - updating my webapp after deploy
For the flexible environment (possibly your case as you mentioned 10 min deployment time, typical for the flexible env) there might be stuff to try, but tedious, see Google AppEngine - updating my webapp after deploy
There is a way to edit directly into the instance.
ssh into your instance and then start shell on your running docker as guided in this url. https://cloud.google.com/appengine/docs/flexible/python/debugging-an-instance
After login you can see your php source files.
Basically you will not have any editor. So do
$> apt update
$> apt install nano
$> nano index.php // edit your files
you can see something like
There is no way to change 1-2 files on the server so that it would update the app. Deployment is the process of updating the live app. If you want some changes to be made to the app that is already deployed, you will have to redeploy - there is no way around it. This is why it is recommended to test the app locally before (re)deploying so that you are sure everything is working fine.
If locally everything works fine and issues start happening only when the app is deployed, this should be investigated further and I would advise you to open a new question and provide as much details as possible regarding the problems, including full stack trace of the error, related code parts, your app.yaml contents as well.
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.