I am creating a fullstack application using node, react redux mongo and passport. I have an ask regarding the app architecture:.
Currently the hTML content being displayed on the pages(React Components) apart from the one being fetched from mongo DB like user name, his credits etc. is hard coded like headings, sub headings, article data, welcome page etc. Supoose going further and scaling the application I want to lauch my website in other countries as well and for that I need localization of my website content.
Second usecase is to add tabs like 'Our blogs', 'Case studies' etc which will have the content which keeps on changing and adding and so on.
So my question is how to make this hardcoded data also from some JSON and using it in my components.
What kind of architecture I shoud adopt.
Note - i am already using express api's for getting my user info, logged in status, mogodb data etc.
Screenshot attached.
Related
I'm relatively new to react and wanted to create an app that uses the Bigcommerce API to change product data submitted by the user through a form. My idea is to have a simple form for the user to input a quantity, for example. Once the user submits the quantity the want to change, the new number will be reflected on the product page on Bigcommerce Admin pages.
I have already created the same kind of app with Node with no front end. The app I made reads a csv file and calls the proper APIs to update their quantities. I wanted to create sort of the same app but in React with no csv reading abilities. I am having trouble with CORS errors now for some reason. I tried creating a backend with Node for this React app but I still get the same error.
I tried some other API. one that does not require authentication and that worked fine. I was able to see results when I do the console.log(data).
It seems that this Bigcommerce API won't work because it requires authentication, which I already have made on their backend several times to double check my work. I'm confused and not convinced that there is no way for a react app to fetch data from a remote server with credentials.
I figured it out, but I'm still convinced that I can do this with only a front end application in React. Without Node, However.
What I did was create an endpoint with Express using Node as the backend. Installed cors modules, then allowed requests coming from the front end URL address. Also, pay attention to whether you are using localhost:PORT# or 127.0.0.1:PORT#
to the browser these are different. Make sure they're the same when you open up the browser.
In my MERN I have a main HTML, EJS template with JS codes. Users after authentications could choose several products that each products has been developed by create-react-app and each have their own builds.
Assume that I have 2 react apps with their own bundle. So after use request to select one product based on a link ( for example : mydomain.com/prod1 ) the first react product build should be used. For the second product ( for example : mydomain.com/prod2 ) the second react build should be used and so on.
I have no idea how could I do that.
Currently, for one product I could make the bundle and basically use the below code in node that load the build for the first product. Obviously if I have more products then I do not know understand how node understand which folder should be served to the client.
app.use(express.static(__dirname+'/prod1/build/');
thanks
you want to build a micro-fronted app i think one way you can do it is serve the built react apps in an frame into your main template like at two pages and inject an iframe in them and one the clicks prod1 -> you get html prod1 which injects an iframe with the prod-1 react page in it and like that you can share both apps in the same template , there is a lot of optimization you can add , i even may suggest that the main app would be a react app too so you can have more control over it here is a link of a repo explaining the concept and you can check google for any more information about micro front-end it's easy but complex in the same time
What is the best way to persist user-generated data with NodeJS, Express, and MongoDB?
I'm building my first web-app using this stack (with bootstrap HTML/CSS and JS for the frontend) and I've realised that I need a data-binding solution. I'd rather avoid a complete rebuild of my front-end so it seems like React will be the best option, but I'd rather find out now if I'm missing something obvious.
The app will allow users to create 1-n documents, generate 1-n new components within them, and edit 1-n content-editable elements within those components.
I'm at the point where I've built the server, db, and frontend and the users and documents persist, but the components and their content does not.
The functionality I would like is that, when a user generates a new element or exits the contenteditable area of that element, any changes they have made will persist. I'd like to achieve this without a bazillion API calls.
Any assistance appreciated.
You may create page description in markdown and then render it to react components.
For example you can check https://www.gatsbyjs.org/ plus Remark Custopm blocks plugin - https://www.gatsbyjs.org/packages/gatsby-remark-custom-blocks/
My issue: For my thesis I am creating an auction site. I have an admin panel in which I would like to have some configurations so that an admin can specify that if there are 10 days before the end of an auction some components should be displayed in different ways, some should be not visible at all etc. That’s what I call dynamic presentation.
My question: Right now I am working on architecture and wondering if SSR can be helpful in any way? I am already aware that it can shorten download time of some collections from my database even by half, but I am wondering if there is any way how it can be helpful with dynamic presentation itself?
What I already know: I have read all about advantages and disadvantages of ssr or universal rendering in react. Now I am only wondering if it can be in any way helpful with dynamic presentation or it won't matter if I choose SSR or CSR.
Small side question: I don’t have the whole architecture ready yet. What I know is that I would like to have a database, one separate app for an admin, backend and frontend (either ssr or csr). My first thought on how to manage this dynamic presentation was to store some rules in the database. Then the rules could be configured in admin app should an admin want to change anything. The rules should be send to backend and calculated with some additional data from frontend. Then backend could send some flag to frontend indicating which components to display etc. In theory I could move calculating to e.g. NodeJs server should I go with SSR. What I'm wondering about is; can you think of any better way to handle dynamic presentation? What I am most afraid of is numerous ifs in the fronetend. I would like to have some more elegant solution but I have no other idea so far. For some time I thought about a scoring system but I believe it would be too complicated (instead of sending a flag, send a score and frontend will display correct things based on the score). Also it wouldn’t solve the issue of ifs on the frontend.
I am aware that on StackOverflow questions which can be answered rather than discussed are preferred but I am really stuck and would appreciate help.
Basically SSR can provide some speed on your page because all of your data will not be trying to be fetched when the react script will end with an API call. Data are fetched from database when page is requested and be passed to the component to render with the script.
Also another very basic advantage and the reason why everyone are going the SSR way is SEO. You cannot achieve SEO page with react CSR. This is because google bot etc will try and crawl your page without even render it. Is like trying to "view source" of a page. When you are in CSR the page has no content only the initial react divs empty. You need SSR to have data on the first request of the user.
SSR brings the data on the first request of the user until a reload. In the meantime react router fetches data from the api.
Let me know if that help you.
PS: also a helpful link https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
Hello I have just started learning how to use reactJS I am using the following example https://github.com/pgte/pouch-websocket-sync-example#readme
my first goal is to have a template like the following Design Objective
I am not asking for a solution however I would like to be pointed in the right direction's
how to include bootstrap based templates (and custom style sheets) In react and apply these styles to html elements inside a react component
also how can I use multiple components and their Functions in a single page ?
i'm still slightly confused about react
here is my target objective's
admin template with everything render server side with react <- this will be only the frontend and all data will be stored server side like the example.
all changes will be synced . I aim to use Nodejs or python tornado as server side api's
and include the grid based view with the rows being items from the mongodb or pouchdb store , each item once clicked will render a overlay with a table of TODO tasks , for example the grid could contain staff members and the todo list will be tasks for the staff member to complete
this question is mainly about the design