I can't seem to get the proxying to work for local development when trying to set up a Duende BFF with ASP.NET Core 6 and a TypeScript version of create react app.
Here's the repo I've been working in: https://github.com/dahlsailrunner/duende-bff-react-typescript
It's based on the sample from Duende which works fine: https://github.com/DuendeSoftware/Samples/tree/main/IdentityServer/v6/BFF/ReactBffSample
I'm simply trying to get a new version of the same thing that uses the TypeScript version of React.
If I leave the ClientApp/src/setupProxy.js file named as-is, the React app seems to build, but it never loads in the browser (the output from the react scripts all seems fine and it says it should be in the browser, but I always get "connection refused". This remains true even if I comment out every line in setupProxy.js.
If I rename the file in any way (make it a .ts file, or add -bak to it), everything loads fine on the site but the proxy to the backend/BFF doesn't work.
I've tried adding src/setupProxy.js to the exclude list in tsconfig.json as mentioned as a workaround here.
I'm guessing I'm missing something simple but just haven't been able to see it yet.
Wow - it turns out that the only problem from the code was that the version of http-proxy-middleware npm package was too current. Downgrading it to "http-proxy-middleware": "^0.19.1" did the trick - no other changes needed.
Related
I am working with Speechly API in my react application. In that, I imported PushToTalkButton and PushToTalkButtonContainer from #speechly/react-ui and I have also configured from Speechly Playground it's working fine in Playground. Then I click on the button(PushToTalkButton) in react application it is not capturing my voice and not using the microphone. I tried to find out the problem with ErrorPanel but nothing is showing.
Could you try upgrading to version 1.2.4 by issuing npm install #speechly/react-ui#latest
Earlier versions were inadvertently coupled with a certain version of react-client package and might cause a problem you described.
Today I see a weird thing after build a ReactJS app. when I checking in the browser after builded files it's exposing my raw folder structure. It should not expose the directory.
I see some StackOverflow saying that "homepage" : "." in package.json will solve, someone saying "start_url" : "/" need to change in manifest.json. but nothing is working for me. Any way to solve this.
You're seeing this because you're running this project locally.
When you run a project locally, it doesn't use the prod version of your app. It uses the dev version which isn't optimized for production. This is done to help you out with debugging during the development phase of your project.
If you deployed the app, the deployment would be using the build output (and not your local build, like you see here).
Note: If you're still experiencing this issue then your bundler (if you've ejected a CreateReactApp, then I'm referring to webpack) needs proper configuration and you'd need to provide us with more information.
I am using conditional rendering without React Router or any other routing module in App.js. I am also using create-react-app for the project, however it's been ejected using npm run eject. If I request http://localhost:3000/privacy.html it seems to rewrite me back to http://localhost:3000/. That is, I'm given the contents of the index file, while the URL remains unchanged. After the production build is put on the production server I am using Nginx to fix the issue on said machine, but how would I solve this on the development machine?
Also if there's an easy configuration setting to conditionally "rewrite" URLs back to index, please give it a mention. For instance, I still want http://localhost:3000/35643, or any URI which ends with numerics, to rewrite back to http://localhost:3000/, but not http://localhost:3000/privacy.html, which would be some sort of exception.
I'm a newbie to Webpack and all the features beside core React, so would highly appreciate generous explanation of the configuration.
I come from a background in Angular, but I wanted to start learning React. I want to make a React front-end for a nodejs Express web service.
In Angular, I could simply build the source code into a static folder with a standard index.html, and it can be deployed on any web server. With React however, every tutorial I see is about running React in its own server using create-react-app and npm start.
I know you can also just use script tags to import the React framework in a static page, but then you can't use JSX syntax, and I would like to. Is it possible to simply build a React project into a static folder with an index.html that can be deployed on any web server?
Yep, you can do what you're describing. If you want to use JSX syntax, you'll need Babel, which transpiles it into standard JavaScript.
You can avoid the complexities of setting it up by using create-react-app to create the app, then running npm build instead of npm start. This will compile everything into a build directory, complete with index.html.
CRA uses its server for development purposes. You don't need CRA for using React of course. But, as your app getting bigger and bigger you will need some more extra tools. For example you want to see your code instantly without refreshing your browser. Here comes the dev server and hot reloading.
CRA uses Webpack behind the scenes. It is a great tool for bundling (obviously) all your files (including css), minifying, uglifying, optimizing your code etc.
For simple code or testing purposes using one file and attaching React and Babel to your file could be enough but for real apps you will need more. Either you will use something like Webpack on your own or you will use CRA and let it do all the extra stuff for you.
So I am new with working with react and have followed this tutorial here to assist me. All runs fine following these videos and all locally, but after doing a npm run build and then pushing to Azure via a local git repo, the UI runs as expected, but whenever the UI tries to hit the Express/Node backend, it gets an error that I am not understanding how to resolve. Looking at the build scripts that runs on both, I do not see where or if I need to change an environment variable as it is already hitting the correct port on Azure. What I get is the following:
What do I need to revise for this? Since webpack with the build script in create-react-app seems to do what it needs to, I am not quite sure where things are going wrong.