React App environment variable is undefined hosted on IIS manager - reactjs

<configuration>
<appSettings>
<add key="REACT_APP_SERVER_URL" value="http://hostname.api" />
</appSettings>
</configuration>
I have added the REACT_APP_SERVER_URL env key in the web.config file and the React App is hosted on the IIS manager. I did a console.log(process.env.REACT_APP_SERVER_URL) in React to read the value of this key but I always get back the value of undefined.
I have also hosted a Node Express server on the same IIS manager instance and the environment variables works fine there. I am not sure if this is a React issue or IIS manager issue, can someone assist me? Thanks.

Related

How can I host my NextJS website on Winhost which supports IISnode?

Recently I developed a website using NextJS with some features like ISR and API Routes. Unfortunately, I purchased a hosting service called Winhost that is not especially for NextJS and only supports IISnode.
So, is there a way I can host my NextJS website without static exporting and retaining all the features?
At the end of the day a NextJS application on the server side is a NodeJS application, follow the steps here
https://support.winhost.com/kb/a1534/node_js.aspx
Make sure you select the right node version with your NextJS application - i.e downloading the right node.exe
The mapping file seems to be important so nodejs apps are executed by IISNode
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<handlers>
<add name="iisnode" path="*.js" verb="*" modules="iisnode" />
</handlers>
</system.webServer>
</configuration>

App Service web app showing file structure instead of actual web apge

Today i've deployed my client react app to Azure App Service. The problem is, that instead of displaying site im interested in, it returns structure of wwwroot. Even if I change directory to /src/App.js it return code of the App. What is the problem?
When you run a node application on Windows Azure Web Apps, IIS is used as the webserver together with iisnode and most likely some configuration is wrong so IIS doesn't know what to start. I'd suggest to let Azure handle the creation of the web.config and you don't touch it unless you know what you're doing:
Create a file .deployment with the following content
[config]
SCM_DO_BUILD_DURING_DEPLOYMENT = true
Put the .deployment file as well as the content of your React app (don't include web.config, you also don't have to include the node_modules folder, Azure will handle this as SCM_DO_BUILD_DURING_DEPLOYMENT is set to true) into an upload.zip file.
Delete the content of /wwwroot in Azure
Run az webapp deployment source config-zip -g <ResourceGroupName> -n <AppServiceName> --src upload.zip
A new web.config should get created which should contain a handler for server.js which will be the file to be served by Node.js.
This is solved. Thanks to #azium
The only thing i needed to do is run
npm run build
in local before deployment

Publishing on Azure a asp.net Core 2.0 WebApp with ReactJS on Development mode

I've got a web app with asp.net Core 2.0 and ReactJS.
If I publish the app in Azure in a Production environment everything goes right.
But when I try to change it to Development (adding on the Application Settings the key ASPNETCORE_ENVIRONMENT with value Development) the app crashes at the startup.
More exactly on the Configure method trying to do this:
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true,
ReactHotModuleReplacement = true
});
}
And it throws an error like this:
An error occurred while starting the application.
AggregateException: One or more errors occurred. (Attempt to connect to Node timed out after 60000ms.
)
System.Threading.Tasks.Task.GetResultCore(bool waitCompletionNotification)
NodeInvocationException: Attempt to connect to Node timed out after 60000ms.
Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance+d__13.MoveNext()
I tried to publish it locally but is the same that in Azure.
Any one could help me to configure it correctly?
Thank you.
We host our site in Azure as well and the solution for me was to add this config key/value to the Application settings.
Key: WEBSITE_NODE_DEFAULT_VERSION
Value: 6.9.1
I suppose you could also add it to your appsetting.json or web.config as well.
ok after a long struggle I have found a way to overcome this issue.
First set the app settings in Azure WebApp Settings - WEBSITE_NODE_DEFAULT_VERSION with the latest version. In my case I have used the node version 8.9.4 matching my dev machine environment.
The Azure deploy task in VSTS has got a feature to run a script post deployment where we can run "npm i -g" which will pick the package.json file from the wwwroot folder.
Try this and update here.

GitHub Deployment to Azure

I've tried to upload my Angular2 project from GitHub to Azure but I get the following error when I open the Azure page:
You do not have permission to view this directory or page.
The GitHub deploy to Azure worked fine, no problem. Does anybody know the reason why I still get this error message?
Here's my GitHub project
Here's my Azure website
You are using Azure Web App and Azure uses IIS to host your application. So, basically, you no longer need to handle your Angular2 project with the Node.js script.
Please try to delete your server.js file from /wwwroot folder, and also remove the following content in web.config file.
<handlers>
<!-- indicates that the app.js file is a node.js application to be handled by the iisnode module -->
<add name="iisnode" path="server.js" verb="*" modules="iisnode" />
</handlers>

Working with modules on the local dev server for Java

I am developing a Google Appengine Java application and I am facing a major challenge testing with the local dev server. I dumped the Eclipse tools cause I'm more flexible with Netbeans and
I am using Appengine Maven plugin for my development.
This is my sample project structure :
myapp
module-endpoints
module-web
module-ear
pom.xml
The application works when I build with mvn clean install on the root folder(myapp) and also when I use the mvn appengine:devserver command to run the module-ear application, however I can't seem to access the cloud endpoints via http://localhost:8080/_ah/api. I can only access the endpoint's API via the dynamically issued port when I access it via the admin console http://localhost:8080/_ah/admin.
The issue with this is that when testing cloud-endpoint Javascript client on the module-web project according to tutorials I am supposed to use localhost:8080/_ah/api as my url to test. Am I missing something?
If the question is still actual you could always update your pom.xml with flags so that the ports of all your modules are defined:
<plugin>
<groupId>com.google.appengine</groupId>
<artifactId>appengine-maven-plugin</artifactId>
<version>${appengine.target.version}</version>
<configuration>
<port>8080</port>
<jvmFlags>
<jvmFlag>-Xdebug</jvmFlag>
<jvmFlag>-Xrunjdwp:transport=dt_socket,address=1044,server=y,suspend=n</jvmFlag>
<jvmFlag>-Dcom.google.appengine.devappserver_module.mymodule2.port=9090</jvmFlag>
</jvmFlags>
<disableUpdateCheck>true</disableUpdateCheck>
</configuration>
</plugin>
Then you could use localhost:9090/_ah/api/explorer to test your APIs
If you have several modules deployed, you need to update your maven app engine launcher setup to recognize the different modules. See the modules sample Java app at https://github.com/GoogleCloudPlatform/appengine-modules-sample-java.
If you've already done that, then a dispatch.xml file will tell app engine how to route requests: https://cloud.google.com/appengine/docs/java/modules/routing
It worked when I made the endpoints project the default module.
dispatch.xml is ignored on devserver, the documentation states the following.
Dispatch files
All dispatch files are ignored when running the development server.
The only way to target instances is through their ports.
This means that only the default module will be reachable at the configured port (typically 8888 or 8080). I have just tested it with app engine 1.9.25 and it does not work, so no improvement has been made.
On the other hand you can always refer to the module by its port. The module's location is logged in the console when the application starts, you will see something like:
INFO: Module instance module2-auto is running at http://localhost:37251/
In my case this was useless since I was expecting to make AJAX requests to different modules by using the same host (but different urls). For instance:

Resources