My Problem:
I recently became the new Dev in a system which has a backend with Dotnet 3.1 and a Frontend of React, TypeScript and it is build with Yarn.
I can run the whole monster. For this, I first build the frontend, copy the created .js files to a static files folder in the backend, and run the Monster.dll.
How to debug the frontend? (I am afraid it relies on the backend being available.)
So far I tried to use Visual Studio but I'd try anything that is free and runs on Linux.
Seems you confused the front-end environment with the back-end.
Basically, your React front-end application runs on browsers whereas dotnetCore application runs on CoreCLR. Meaning that you can debug your React front-end application in browser's Developer Tools in a basic way.
Ensure that the build operation of your React front-end app generates source map (*.map) files. These files map your browser compatible js output files to the tsx / ts sources. Then you should be able to debug it on your browser's Developer Tool.
Related
I'm new to backend. I want to make a server serves up a React app, without using Vite (or CRA). On front-end I'm using React, on back-end I'm using nodemon + express.
I'm confused about how JSX got understood on the browser.
This is my index.html:
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
When I spin up my dev server I get this error:
How come when I'm using Vite, the .jsx files are understood by the browser? I understand Vite uses esbuild or something underneath, but I don't see any dist or build folder, and the requests seems to be directed at the .jsx files directly, not a compiled file:
I think I'm in over my head here. How do people make a fullstack React app?
Even though the request looks like it's fetching the JSX source, it is not. What happens is the browser asks for App.jsx, and the vite server responds with a compiled version of App.jsx. You can see this in action by clicking on the request and previewing the response. Notice all the JSX is compiled down.
You won't see a build folder in dev because the compilation happens in memory in the vite server. It doesn't serve them from disk, it does it on the fly.
So it's kind of like a middleware. JSX isn't really running in the browser, it just references the precompiled version that sits in vites memory using the original filename.
Why are you wanting to not use vite? Are you trying to build for production? In this workflow, everything is different. You execute a vite build and serve the built files statically from disk. You don't want to be doing on-the-fly compilation in production anyway.
If you are wanting to add a developer mode to your server, I would recommend configuring Vite in middleware mode and bundle it with your existing server.
Alternatively, you could develop your UI through the vite server and configure vite to proxy through API requests to your "real" backend.
I have react app, which runs on Azure. I am using Visual Studio Code with App Service extension for its deployment to production and it works well. Unfortunately, I see (in browser React Development tools), that the react app deployed via this extension is deployed in development mode, although during the build it clearly says Creating an optimized production build...
I obviously need to deploy it in production mode.
I tried to search the internet and I only found the same issue here, which is without solution.
Does anyone knows any workaround, so I don't have to setup some pipeline from Git? Deployment via VSC is so easy, so I would really like to deploy with it...
Thanks in advance!
I set a build for a react web app in azure devops and another one for a web api application (c#). I would like to copy the output of the react build in the web api project before release them in Azure. I tried with a copy task but i failed due to the web api application output (it's a zip). Help would be very appreciated.
On the project I'm on right now, this is solved by
1. building the front-end before building the web app project, and
2. including the react-output-folder in the visual studio project, but using a wildcard, not each file:
<Content Include="webstorybook\*" />
By doing that, the files should be included in the published .zip file. Hope it works for you, too.
I'm working on Project using React for the frontend and Laravel for the backend using RESTfull API.
I developed each one in separate directories but now I'm trying to deploy them in the same folder I don't really know what to do.
or can I deploy then each one in their own folder? if yes how can I run them on the same server (apache)?
The directory really shouldn't matter. Since React is a frontend javascript development framework, it runs on the client while the laravel backend will run on the server itself. All you need to do is serve the entry point html and the javascript file created from your react project to the client.
I assume you're thinking about the "development server" that you run while developing the react app. You need to, depending on your build environment, do a production build and serve the files in some way to the client.
When using create react app you can use the deployment build instructions: https://facebook.github.io/create-react-app/docs/deployment
So to summarise:
Host your laravel backend on the apache server
Upload entry point html (you can serve this via laravel, create a template with the correct html)
Serve the deployment javascript file for your react app (just include it on the same html page)
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.