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
Related
I know you may find this question idea based, but as I'm newbie to react, I haven't had other places to ask.
I have created a single page react app using create-react-app and exported production version into build directory using the command npm run build.
Due to SEO friendly problems that react apps have, I decided to go with react-snapshot and react-snap but the first one is too old and deprecated and the second one has too many issues in its GitHub repo.
I should mention that I know about NextJs, Gatsby, Cloud pre-rendering and other ways. But I want to deploy my app to a serverless cloud like Vercel.
I wonder what happens if I render the production version in my browser (Lets say Chrome) and export rendered html, js and css into a single static HTML file? Remember that my app is made of several components, but the URL won't change because the whole app is in a single path/route.
I guess there would be some problems in different browsers!
I have found that it is possible to host a NextJs application on vercel. Besides, I went for vps.
Anyway, for future readers, I guess the best decision in my case was NextJs, which is very fast and light in production.
Note: If you find this Q&A useless, just let me know in the comments so I'll delete it.
I am currently making a create react app with express router and node.js. Before I complete my routes within the server I wanted to make sure I could access the static files through express.static method (front end application running on port 3000 works, it is my server on port 3001 that is not serving files). I have scoured the internet for the difference between create react app and a stand alone because a stand alone imports the components within the index.html file while the create react app does not and I believe express.static can pick that up while not being able to work with create react app. Any advice would help as I am a newer developer and I cannot seem to figure out why my components aren't being rendered. Thanks in advance!
So after days and days of trying different things, i have found a slight reach around. The problem is that the files within a development create-react-app are not static until deployed. So, one solution would be to either make all functionality within a standalone app and transfer your code over or to deploy your app and server the static files, deleting every wrong instance and re deploying your revised code. I think the ladder would have less code changes as you are in the correct environment?
Anyone have any experience converting a react app created with create-react-app to using server side rendering and code splitting via loadable-components? I know this is a general question, but mostly looking for general guidance or any major red flags for this approach. I'd like to keep the nice things you get out of box with create-react-app - especially the live reload dev environment - while adding in optimizations using SSR and code splitting. I was able to mostly get this working using express backend and handlebars templating, but I'm facing many challenges getting code splitting working correctly with this setup. Any hints / stories are appreciated!
There is craco "an easy and comprehensible configuration layer for create-react-app".
Webpack custom configurations go into craco.config.js, inside root folder.
SSR is possible, you can check two related questions that might help you with your case:
Code splitting loads all chunk files on chrome but load them separately in firefox
Loadable Components SSR - chunkNames in Server Stats file different from Client stats file
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
When creating an app with create-react-app,there is only one index.html,does that means React can only handle one SPA at a time? What if I want to develop multiple pages? Should I create another SPA with create-react-app and then put them together after building each of them?
Update:
Parceljs can do that. here is docs.
You can use Parcel instead of Webpack (which being used in create-react-app) and it provide you zero config environment to develop web apps (using react or anything else).
Having multiple pages (instead of SPA) is not what most React environments had in mind [before - see update above].
You can have different page URL's using react-router or similar client side routing solutions.
If the concern is bundle size, there are solutions using webpack or parcel to lazy load each bundle whenever they needed or cache bundle (using service workers) and so on (Tree shaking, ...). (check Code Splitting in React Docs)
Other concern I might have in my brain is SEO, in this case you may find Isomorphic app (react server side rendering) useful which initialize first view of requested URL HTML and sends it to client, then client will load react and react will take control of UI. This will help Google (or other search engines) find your URLs fast and user experience in transitions between pages will remain seamless.