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.
Related
I'm wondering if there's a way in next js to show the eslint issues in either the console or the server after running the development server.
I was able to successfully add custom eslint rules to my next project but i want to make it as strict as posible breaking the dev server and showing the eslint issues when found.
I want to achieve what Create React App does, but in CRA this was somehow built-in. With next this is not the case because the application still runs even after eslint issues were found.
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.
I'm building a frontend with React and Material UI, and everything is running smoothly when I run npm start.
I also have an express app that serves a production build of this frontend (I run npm run-script build and take the prod build and place it in my express app's target destination). When I run this express app locally (with node app.js), everything is rendering and operating smoothly there as well.
Now, when I go onto my Amazon Lightsail linux instance that I was using to deploy, and run the express app over there with node app.js, the app runs, but all of the material-ui components do not render at all. All I see is the background.
Initial investigation led me to believe that within ReactDOM.render, the UI I was rendering needed to be wrapped in MuiThemeProvider. Have tried this to no avail. Its led me to a couple questions.
CSS
In my production build (build->static->css) all I have is one css file, which only lists the background. This makes sense as to why I can at least see the background when I deploy. My question here is, I'm using makeStyles and withStyles in my jsx a lot to create the bulk of my classes. In my production build, should these get compiled down into css?
My other question is if it should get compiled down to css, why am I able to see all of my material ui components when I run the express app locally on port 9000, but can only see the background when I serve it onto my static port on lightsail? It's the same build, so I almost find it hard to believe there's something wrong with my build.
Anyone experience anything like this? Any tips or advice on how to debug would be appreciated, I've been stuck for quite some time.
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.