I'm new to React and I'm trying to configure the WebAPI URLs based on whether the app is running in dev (local machine) or production (hosted on Azure).
I'm using VS2022, C#, .Net7 with React.
I've noticed that in my setupProxy.js there's a section that accesses the environment variables:
const { createProxyMiddleware } = require('http-proxy-middleware');const { env } = require('process');console.log("env.ASPNETCORE_HTTPS_PORT=" + env.ASPNETCORE_HTTPS_PORT);console.log("env.ASPNETCORE_URLS=" + env.ASPNETCORE_URLS);const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` : env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:23988';console.log("target=" + target); // remove this after you've confirmed it is working
I've written a small config script for the app, where I was hoping I could use those same environment variables:
//const { env } = require('process');//console.log("env.ASPNETCORE_HTTPS_PORT=" + env.ASPNETCORE_HTTPS_PORT);//console.log("env.ASPNETCORE_URLS=" + env.ASPNETCORE_URLS);//const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :// env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:23988';//console.log("target=" + target); // remove this after you've confirmed it is workingconst serverVars = { apiUrl: "https://<prod-api-url>/"};const localVars = { apiUrl: "https://localhost:7086/"};const environment = "!production";export function getConfiguration() { if (environment === 'production') { return serverVars; } return localVars;}
But...when I uncomment the environment parts and run the app, I get:
Compiled with problems:ERROR in ./src/config.js 5:4-22Module not found: Error: Can't resolve 'process' in 'C:\xxxxxxx\ReactTest\ReactTest\ClientApp\src'BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need this module and configure a polyfill for it.If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "process": require.resolve("process/browser") }' - install 'process'If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "process": false }
I have to confess, I have no idea what this even means...other than it's not working...
The setupProxy.js and config.js files both sit in the same (src) folder.
Could someone be so kind as to point out my problem here? Why can't the environment variables be read in config.js?