I have developed my ethereum smart contract and I want to integrate it with my web application. But I don't know that is integration with ReactJS a better option or integration with nodejs a better one. Please give suggestions . Also I don't know how to do integration with backend through web3 library so please guide me about that.
When you are creating web3 app , most of the time you are not going to need a backend for that (Although you need a server to host your website) .
Working with and managing smart contracts are very easy at the front-end and there is no need for backend, but if your working on a large scale project , you are definitely going to need a backend for handling complex logics .
Next js is best option for both of that , containing node and react , also no need for manually configuring web server.
Better is next.js. I explained it here: https://ethereum.stackexchange.com/questions/129547/next-js-versus-react-which-to-use-when-for-your-dapp/130040#130040
Not every browser has metamask extension. By using next.js, when our
code is taken and rendered on the server, on the next server we can
reach out to the Ethereum network and do some initial calls like data
fetching, or alist of items in your smart contract. we execute all of
those requests on the server. That means when next.js produces Html
documents to send down to the user browser, it does not matter whether
or not users are using metamask. It does not matter whether or not
they have access to an Ethereum network. Because we already take care
of the data fetching for them. So all the users out there who are not
using metamask are going to see some information on the screen.
You've mentioned that you don't want to switch technologies, and while I agree with NextJS being a good platform to develop dApps on, I suggest you just use your current NodeJS server for anything that isn't web3 related and you use the web3js library from the frontend (your React) which would be very similar to a NextJS app anyway.
This way you don't have to switch technologies.
Related
I am developing my own website. So far, I've used React for the frontend and Flask for the backend. I've been doing frontend development for a while now but I'm just starting to get into the backend.
From my limited understanding, frameworks like Flask and ExpressJS create their own servers and host data that the frontend can use. It seems to me that that they automatically create websites to host and receive data. In my website, I route the backend to do what I want and use fetch requests with POST and GET from the frontend to communicate.
Although it works, to me, it seems overly complex. Why does the backend need it's own server? It seems unnecessary to create a proxy for the frontend and fetch data. Why can a website not just run custom code in the background, why does it need a service like Flask or ExpressJS to run in the background for it? These backend frameworks run Python or NodeJS in the background, but wouldn't it be much simpler if the website itself could run Python or NodeJS in the background?
I also see that in frameworks like React, you can import things and use modules— like in NodeJS. While importing some modules works, the require keyword is not allowed and normal NodeJS code will not work. Therefore, the backend will not work. Why is this— why can't you just run backend code natively? Instead you have to go through fetch and specify headers to basically translate information from your frontend to your backend.
Forgive my amateur understanding of web development, but the frontend/backend system seems overly complex to me. Thanks in advance.
Why does the backend need it's own server?
Where will the client store data so that when you open the page again the data will still be there? You can use localStorage but this is locked to that particular browser. What if someone logs in on a different device or uses a different browser?
Where will the client get the application from in the first place? Your application needs to be packaged up in a form that can be easily downloaded, and it needs an address to be loaded from. This is all considered "back end" even if you're using a static hosting service like GitHub Pages.
There's a lot of reasons why a back-end exists and needs its own server. Any application with persistent state which is expected to work across different sessions needs at least one of these.
I want to use React for a project I am working on, but I also want to use an API.
How can I do it?
I have tried to Google this and ask different people, but I have not got a response yet, so I thought I would ask here. I want to use express and maybe not use create-react-app (as it takes up a lot of storage).
Working on a custom server doesen't preclude the use of an API.
If you want fetch the API from the express server and inject it directly on react frontend you need to enable server side rendering (useful post) and pass the data collected as a props from the server (check this example).
Rather then you can build your react project (using even create-react-app) and build an express server who return the index.html on call.
Personally I prefer the first one solution.
I'm trying to set up a server and react app to both serve from one place, and host from one domain. This gives me the advantage of one repo and being able to use server side cookies instead of auth tokens.
See also this link: https://dev.to/nburgess/creating-a-react-app-with-react-router-and-an-express-backend-33l3
I also prefer to use typescript.
I really think this would be a good approach, but it is hard to find resources. All courses, free or paid, are working with separate React / Angular frontends, which then need to fetch data from a backend on a separate domain.
Does anyone know a good resource how to combine a react frontend and an express backend and host it from one place? Or are there good reasons not to do that, which I just don't see at the moment?
I have read on couple of articles that when building a website with react either php or nodeJS or something else is required to have a backend to retrieve data and server side rendering
I can manage data retrieving on react without any backend server (based on my experience with react-native).
I am not sure if server-side rendering is necessary for react?
What are the pros/cons, can the website work without server-side rendering?
Something has to render the original page being served for React. However, after that, there's nothing stopping you from doing everything else client side. There are tons of articles out there discussing the benefits and drawbacks of doing full CSR (Client Side Rendering) or full SSR (Server Side Rendering). However, I've found that most agree that there's a middle ground that meets the best of both worlds.
However, if your app is relatively small and unencumbered, going full CSR as you're indicating you want to will probably have little or no impact.
Server side rendering will give you better search engine results and previewing.
You can still use React with server side rendering with a framework like Nextjs. You may just want to initially render on the server side and from then on in use client side rendering.
Really depends on what you're planning to build. Firebase has security permissions for you to experiment to filter out what type of traffic you'd want. However if you are solely dependent on the client then there would be severe consequences for edge cases. What if there was an app breaking bug and someone abuses it, what if someone has an older version of your app and calls bad code? Utilizing nodeJs to call your business side logic is a very important layer of protection since you have one codebase that handles all of this incoming traffic.
So an example of business-side logic that shouldn't be on the client's system:
What if you had an important counter say $ dollars that you've spent on that website and it goes into the database once and feeds you that information and you'd save that into local storage until the end of the session. Are there consequences to this if you had multiple instances (hint: they might not all of the same $ amount if you've manipulated that data on the client's side) ? This would be an example of why you'd definitely want to have a nodeJS backend for your React application.
I am currently working on a small project where I used vue.js to build the front end and express.js for the backend.
For the frontend, I have another express server to just serve the static files and all the requests will be redirected to my backend API with proxy by the frontend server.
For the backend, it is just an Express API app.
Both apps are runing on heroku right now. And my questions is:
What is the best practice to connect the front end and back end server, I did a lot of research online and people are saying backend API are not supposed to be exposed to internet？ I am not sure how I can talk to my backend if it is not on internet.
For the frontend, I can use SSL/TLS to protect the connection. But for frontend to backend server communication, what should I do to protect this data transfer, can I use another SSL/TLS? And should I use some mechanism to verify that the request is sent from my frontend server, not somewhere else? If so, what is the recommanded way to do that?
A lot people say that there should not be direct connection with database, it should go through a web service for security. What does that means? Now in my backend Express app, I have line of mongoose.connect('mongodb://someaddress/myapp'); Is this bad practice? If so, what should I do to make it more secure?
Please try to be more specific, I am still new to theses and try to learn, code examples can really help. Much appreciated!!
Vue and Express apps are written in the same language, so it is best practice to have these as separate projects as you have done. These are entirely different projects doing different things so they should be split.
You already deployed to Heroku, so the SSL/TLS isn't really a concern for you. However if you were deploying to your own VPS, you'd want something like Let's Encrypt. For restricting requests from Express to your Vue app, you'll want to look into CORS. See expressjs/cors for more details.
The Express app is the service connecting to your database. If you were trying to directly connect to your database from your Vue app, then that becomes an issue. You would coupling client side code with server side code. What you're doing is fine.