I am trying to build a dapp but I am having problems. My idea is: I have a front-end written in html / css and a backend implemented with web3.js thanks to which it is possible to connect to a blockchain node. is this reasoning correct? Now how does a user connect to my dapp? Should you use a wallet?
You probably need to define your requirements and explain why you need a backend. If you manage all web3 interactions from the backend, you will also have to manage wallets / private keys, assume transactions costs... and not sure this is what you want.
From my perspective:
Frontend: You can use web3 (web3.js or ethers.js) to connect to a browser plugin such as Metamask to allow users sign transactions without sharing their keys, which is the simplest and more secure way (and the users will pay for their transactions, not you).
Backend: If you need to store user data off-chain, or track the status of the ongoing transactions to restore the website page with the current transactions if the users leave the page, or do calculations such as yield interests, etc then you probably need a backend. Other than that, I would keep as much web3 stuff as possible in the frontend (to make it more a DApp).
- On an ideal DApp no backend is needed, and the user uses a wallet and frontend to communicate with the blockchain directly
- On less ideal situation DApp no backend login is needed and it has only public functions
- If you still need a login use Sign in with Ethereum with your backend
Developer Advocate at Chainstack here.
If you are looking to develop a dApp with an HTML/CSS front end coupled with a web3.js backend, it's essential to understand the two prevailing architectural patterns: the traditional monolithic structure and the modern integrated framework.
In a monolithic approach, your architecture would consist of:
- A Front End: A static HTML/CSS interface.
- A Backend Server: A separate entity that your front end communicates with, acting essentially as an API to retrieve and send data.
This setup requires two distinct deployments - one for the front end and another for the back end, each serving its own role yet working in unison.
For an illustrative example, check out a repository I created showcasing this architecture. It features a straightforward HTML/CSS front end with a backend powered by an Express.js server.
Regarding wallet integration, the need varies based on your application's functionality. If your app simply displays blockchain data, a wallet isn't necessary. However, if user interaction with the blockchain is needed—such as making transactions—a wallet integration becomes essential.
For a more seamless development experience, consider using a framework like Next.js. Next.js allows for both front-end and back-end code to coexist within the same environment, facilitating a secure and manageable development process. This can significantly simplify deployment and enhance your app's capabilities, such as server-side rendering, for better performance and SEO.