I know standard approach is to use node.js. However, our server side api is written on Apache.
So, we wanted to run on Apache only.
Is it ok to run react on Apache or we need to install node js?
In apache setup, how do we do the .dotenv package? We need to set environment variables.
It's absolutely fine to run React on Apache. Remember that "React" is nothing more than a JS framework/library. If your app is client-side rendered and you don't have to worry about server-side-rendering (SSR) then all you need is to deliver the bundle of JS (usually coming off Webpack) from your Apache server to the client.
Nodejs tends to be integrated nicely and hence used most of the time, but if you really want to stick to Apache only, then you can do it.
Read the official CRA docs
This might also help
Related
I have a huge project using asp.net and jquery. I want to start migrating to react page by page (it might take a lot of time).
I would like to know what is the best practice to do it.
Can I move pages to react partially (for example half of page), and is it good approach?
Lets say I have main page A with with links to page B and C. Can I move page B and C to react, using routing, without moving page A right now?
I think I will use Vite to create and manager react project. In the production vite generates static files so I will simply host new files next to old ones in my backend server.
The problem is with development, because in this mode vite creates new server with functions like hotreload and in the result I have two diffrent servers hosting frontend asp.net and vite.
I would prefer to have just one server also for development. Is it possible to build development version with vite and copy it to server the same way like in production? Is this good approach?
I know that it would be the best to have backend and frontend server separated, but project is so huge that it is not possible in the foreseeable future
I am using React in my project and I have problem with client-side prerendering.
More specifically, it would be necessary to configure SEO
Which is the least painless way to prerender existing reactjs app wiht react-routes
Some examples I have researched:
Gatsby.js - https://www.gatsbyjs.org/docs/porting-from-create-react-app-to-gatsby/
Next.js - https://nextjs.org/docs#custom-document
Netlify - https://dev.to/joelvarty/prerender-your-spa-using-netlify-for-better-seo-3h87
React-snap - https://web.dev/prerender-with-react-snap/
Prerender.io - https://prerender.io/
Keen’s Server Side Rendered - https://medium.com/keen-studio/keens-server-side-rendered-react-wordpress-rest-api-boilerplate-bb58edb7cc0a
Razzle - https://reactresources.com/topics/razzle
React Helmet - https://github.com/nfl/react-helmet
Can anyone suggest what option I should choose that is the least painless.
I have headless wordpress as backend and reactjs client-side as frontend.
Or are there other faster options besides the prerendering?
Thanks.
IMO you really don't need to use a framework to achieve SSR if you want to keep control without turning your codebase into a blackbox and choose your own stack.
I created some boilerplate using Node Express. It supports:
SSR using StaticRouter on the server and BrowserRouter in the client
ES6 webpack transpilation + hot reloading both client and server and auto-updating browser
Redux, data preloading and client store hydration
https://github.com/kimgysen/isomorphic-react-setup
Last time I ran it, I noticed that I hadn't saved the favIcon in the public folder and perhaps there are some minor bugs that I will fix soon (I've fixed them in my projects but didn't update this repo because nobody looks at it anyway (lol!)), but what happens here isn't all that difficult to understand.
I created some basic SSR websites with it in a matter of hours.
I enjoy redux-observable to initiate server ajax calls before rendering the content (using forkJoin), but this is not included in the boilerplate (I haven't actually supported it since I uploaded the first time).
But in terms of setup, I don't really see a point in using a framework for this necessarily, it really isn't that painful / difficult to do yourself.
The benefit that I particularly like is that you don't depend yourself on the scope and dependencies of the framework. You don't get into trouble with things like 'the framework will support this feature or fix that bug in one of the upcoming releases'.
Although ultimately, it comes down to personal choice. So it's not like I want to downgrade these frameworks.
Note: The way Redux achieves pre-rendering is simply by adding Redux store (state) objects to the window object in the html that is sent back to the client.
Then at the client, the it initializes the stores with these objects.
So very simply, this is something that is easy to achieve, even if you decide not to implement any other SSR features.
to create server side applicantion with painless integration you can use my cli to generate a default configuration like create react app cli from facebook, https://github.com/ghondar/crassa
Till now I worked on Java based web applications and recently started working on ReactJS applications. Below questions are running in my mind and I appreciate your help in providing solutions for below questions:
I came to know that Babel is going to convert the ECMAScript2015+ code and the JSX code to ECMAScript2015 so that the browser will understand it. So does this translation will happen when we compile the React project using "npm"? And if it happens during the compilation, does the Babel will convert the entire code in the whole project at a time (or) will Babel converts the file which is requested by the client?
Once after creating and developing the React code, we are using Node software to install all the required dependent libraries which are used in our React code and also "npm start" command to start the react application. So here I want to know if NodeJS is the server which runs the React applications and without NodeJS we cannot run React application as a standalone?
When we take Java based web application, that Java application will be running in a server computer and Jboss or Websphere Application Server etc... are responsible of running the Java web application EAR project. Then when a client makes a request to any resource in the EAR, then the server will take the request and send the response as an HTML to the client.
In the same way I want to know how this request response cycle works in React Application? For example, if the react application is running in a server computer and NodeJS has started the React Application in the sever computer, then when the client invokes the React application using the URL corresponding to the React Project, then what the server is going to send back to the client/browser? As Babel will convert the React application to the plain JavaScript (which is understandable to the Browser) and so does the server will be returning the Javascript back to the client?
If the server returns the Javascript code to the client/browser, will the server returns back the Javascript code of the entire React project (all files) to the client or will the server returns the Javascript version of ONLY the request file?
React is a front-end library, which runs in the browser. Like any other frontend library (jQuery, etc), it is happy to be served by any old webserver – Apache, NGINX.
The react application will communicate with the backend in the form of REST API calls, which will only produce the dynamic data rather than the HTML.
The HTML is drawn using the JSX on the frontend (https://reactjs.org/docs/introducing-jsx.html)
The compilation happens every time you start your project (say npm start) or, if the project is already running, on any saved changes, it will recomplile every time as well as give you any errors found during compilation.
Yes, the NodeJS will be the one serving content. Technically, you can still use React as standalone. See This tidbit in official ReactJS Documentation
I'm not really great with technicalities behind React inner workings, so anyone competent feel free to correct me on this, but your server will serve JavaScript code to your browser already working and compiled fully so that even if the React server stops running (terminated or any other reason), you will still be able to work with most of the application since the data has been already loaded. There may be libraries/packages that allow lazy loading of components, but that depends on your usecase, I guess.
See my final bits in the previous point.
Hope this helped you in some way
In an article I read that
React uses server-side rendering.
But in another articles I came across this:
Client-Side-Rendering is a relatively new approach to rendering
websites, and it didn't really become popular until JavaScript
libraries started incorporating it into their style of development.
Some notable examples are Vue.js and React.js
Now Which statement is correct?
When I use create-react-app and run npm start, it seems to me that React uses the Client-Side-Rendering. isn't it?
It’s client side. But React, like some other client side libraries, can be used on the server to prerender it with node, usually for SEO.
Out of the box it renders on the client side.
But, if you have a requirement to render pages on a server, you can achieve this with:
Next.js or
Hypernova or any other tool (there is a bunch of them nowadays!)
Note, that SSR will require a bit more experience than a regular React app.
The main goal of this approach is to allow search engine robots crawl information form web pages(SEO).
create-react-app uses client side rendering by default. There are some tools like next js and gatsby js which pre-render pages on the server side. You can also do Server Side Rendering from scratch.
A few years on from the last answer, it is now quite difficult to implement a client-only React app - serving it on Node is trivial and absolutely what it expects, trying to use it as a client library with other server-side support is more of a challenge and documentation about how to do this is patchy and much of it out of date.
I'm using create-react-app in my latest project and it's great! Now I'm facing one issue that I'm not sure how to solve properly.
I've created app using redux for my state managment, and that all is working well.
Now I don't have much experiance with server side renderin in React, but for my next feature I'll need to take one of the existing / working react components (that are connected to redux store) and render it on server that comes with create-react-app. The reason why I wanna do this is to be able to use some libs like pdf generators and simillar to be able to print out some of them (also some other stuff but that's the basic).
First thing I'm confused with, since I don't want to render everyting on server, what's the best / correct way (for development) to run webpack-dev server and node server that will do all those taks I mentioned above in parallel instead of just changing it's default port to let's say 8000, and run it manually?
Secound, should I be able to just use ReactDOMServer.renderToString on that existing component on server or there is something else that will complicate stuff (I know I'll need to add babel on server definitaly)?
Create React App does not support server rendering. You might want to migrate to Next.js which does.
Unfortunately, Create React App (CRA) doesn't have extensibility points to allow this. But there is a slightly altered version of CRA that allows compiling, testing and running both client-side and server-side code using regular CRA pipeline - npm start will compile and launch both cient-side and server-side portions of your app, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.