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.
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 been trying to run my react application on a subdirectory .
I am using a load balancer (ALB) to and redirecting my application on "directory" from "https://mydomain/directory".
But static file of the build was not being found by my application
added direcctory on package.json. "homepage": "/directory"
added basename on react-router-dom
in my networks index.html is looking for ".#####/directory/static/js" and css in the same way
i am only able to run my react build by redirecting static request to my react build, but this is not the good solution because i want to run 3 applications on my ALB and this will cause me change my assets folder name manually in the build, obviously don't want to do that.
I have been applying multiple solutions but couldn't find a proper solution please someone help in this.😑
ALB doesn't do redirects, and it doesn't do any sort of request path rewriting, it simply forwards the request to the target. You need to setup your server so it is actually serving the website from that folder, in other words change your assets folder name in the build.
If you don't want to do that, you would need to look at other AWS solutions like CloudFront which can proxy the request to a different path on the origin server.
I had a scenario of publishing react app with nginx inside docker with ci/cd. It took me setup a separate express server to serve app files and resolved the issue. Here is the repository synopsis of server.js that might help:
https://github.com/mkhizerali/store-pwa/blob/master/express/index.js
I recently create Express and MongoDB API and after that, I connect that API to my React Application successfully and which is running well. But one situation occurring during deployment now I need to deploy both projects separately means I need two hosting plan for them. So, I want that both project running on the same host. Is it possible? and How?
A build of any React application creates (unless webpack-dev-server is used to compile it) the output which consists of static files: script bundles and .html file(s) that reference the bundles in <script> tag.
Those files can and should be copied to Express in production build. Then you have one server on one host. When React application runs inside a client (e.g. browser) it gets everything including .html files, script bundles, API responses from the single source: Express backend/server. Which by the way excludes any possibility of getting CORS issues so many people are asking about here on SO.
Example, e.g. a boilerplate project that demonstrates all that.
If you execute commands:
git clone https://github.com/winwiz1/crisp-react.git
cd crisp-react
yarn install && yarn start:prod
and then point your browser to localhost:3000, you will have React app running inside your browser and it got everything from one single Express backend.
crisp-react has two subdirectories: client with React client app and server with Express backend. The build command copies the build artifacts from one subdirectory to another. So you can even rename or delete the client subdirectory after a build, it won't affect the Express backend.
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 have an express js backend and a react js frontend.
Now i want to serve this as one project.
Is it possible to build a task with webpack, grunt etc. to build the react js first and then move the build to the public folder in express js?
There is! You can serve your static client files (your react app) from your server. I would suggest checking out this article if you want to know how to do so https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
Yes you can. You need to make a production build which will place all files in a directory; let's say "dist" directory. Now you can run express server or any other server (lite-server suggested) and set base directory as "dist" which will run index.html by default and your app will be running in production mode.
You can read official article from Facebook here :
https://reactjs.org/docs/optimizing-performance.html