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.
Related
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.
I am trying to set up the CRA environment in a way, so that I can use php files instead of the provided index.html.
Initially, I proxied requests to my MAMP server as it is advised in the CRA-docs, however, I want to do some server-side processing before I run any react file in order to add some <meta/> tags for crawlers which don't have JavaScript enabled. (Note: My main apache server is unable to pre-render any JS files)
Before using react, webpack or CRA I achieved this with gulp-connect-php as the dev server which read from a pre-bundled dist folder and browser-sync for implementing hot-reloading.
I built an app in React with create-react-app. Just JavaScript, CSS, HTML & React. I ran npm build then deployed the app to Netlify.
I want to go back and edit some CSS. So, I cd into the directory from my laptop and deploy on localhost:5000. I open VS Code and make changes however none of the changes are reflected in the browser # localhost:5000.
When I was building the app, the way I had it set up allowed me to view each change immediately in the browser when I save the file.
Are files editable after you run npm build? What am I missing here?
When you run a build on a react app (or any other app) code will be converted from es6 to es5 and then probably minified (depends on webpack config) so code is unreachable and you need .map files to debug code in production environment.
So the most clean way to act on deployed code is to make a new build with updated features and deploy again the frontend.
In local development react boilerplates usually make intensive use of hot-reload, a plugin that allow code to be hot replaced while app is running.
Built application instead load chunks of JS files once and CACHE it. So in order to see your changes you have to clean cache or force a refresh (home+F5 on windows, CMD+R on OSX) to be sure that your changes are visible.
Despite this I discourage to edit the build files. When you have to update the code stay on development mode, before deploy, build your code and test it live.
You could create some files outside the src folder and access them with fecth from app.js or even import them from index.html ... so if you wanted to change something you could do it without having to do a build again.
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.
How to use the production version of a react or angular project and run without a local server?
( like opening from index.html or something similar)
I want to make a static web application that uses react or angular 2 as a starting point. Eventually, this will be dynamic so it make sense to take advantage of either.
I don't mind using local http-serve to serve the html and css pages in development but due to some restrictions i won't be able to set up a local server or run npm start from the terminal.
I did a lot of research but never found a definitive answer as to
So like How to use the production version of a react or angular project and run without a local server?
( like opening from index.html or something similar
React (same as Angular) is a client-side library/framework. So all you have to do is to bundle your application to a single .js file. That file will probably include React/Angular and you may just load it in your HTML file. You definitely don't need a http-serve for that. It is possible to deploy your index.html and your bundle.js file to a shared hosting and just load the app.