Note: Since our last post in this series we have shipped a new version of DappStarter and we will use that version moving forward in this series. This new version leverages yarn.
Repo Overview When you create a dapp with DappStarter everything flows smoothly and seamlessly. You arrive on the other side of the process and you’ve got a working dapp and a repo that you’re likely ready to explore. If you are a seasoned developer with knowledge of decentralized development then the structure of the project and what each file does may be obvious to you. However, if you’re just learning about blockchain or decentralized development you may have questions about some of the files in the repo and the way it’s organized.
You likely know what the node_modules folder represents, but you also see packages folder with several sub-folders that you may like to know more about. And that’s exactly what we’re going to explore in this post. So let’s get right to it:
Client - This folder contains all the files that are the end result of the build process. This folder is used at application startup and it bootstraps the entire application so that it can run in the browser.
Connector - This folder contains the files related to the connector tab in your dapp. For any techies interested, this is running Node-RED to make this all possible. The awesome part about this is that it provides a very visual way to create and understand data flows in your application.
Connector Plugin - This folder is the result of the build process building the Connector folder. The files in this folder are what execute at runtime to make the Connector functionality work properly.
Dapplib - This is the folder where the majority of your custom code (as in the code you write) will reside. The “contracts” sub-folder houses your contracts, which are the mainstay of decentralized development. We’ve created an interface to make contracts easier and more efficient to work with, but also notice that these contract files are Solidity files - that is they end in .SOL. If you’re new to decentralized development, this may be an item that sticks out to you. Solidity is a language specific to smart contracts and decentralized development, but more on that later.
Frame - This folder is the scaffolding for the project that provides the UI for navigation between the DappStarter-generated web client, the block UI test harnesses, DappConnector and other components that will be available soon.
Server - This folder houses the files for the server that runs your application.When you run the yarn start command the files in this folder are executed.
Hopefully that overview of the project structure is helpful for understanding where files reside and exactly what we’re looking at in the repo. As we’re getting started, we don’t want to jump directly into the deep end just yet. In our next post, we’ll slowly wade into the shallow end by getting some “Quick Wins” under our belt. Then we’ll work our way toward the deeper waters.
.png)
