Customizing Your DappStarter Project ‒ Quick Wins

July 14, 2020

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. And that’s exactly what we’re going to explore in this post. So let’s get right to it:

Quick Wins

When I’m getting started learning a new, extensible application, I want to get some “Quick Wins”. That is, I want to make a few small, subtle changes to see if the app works and I expect and to see if I break it. The result is usually that I slowly build confidence modifying the application. What I’ve learned over the years is that making small changes and getting these “quick-wins” inevitably helps me learn and leads to greater understanding. 

With that context, let’s make a few small, subtle changes and get a few quick-wins under our belts. Here’s what we’re going to try and do:

Add a Page in the Menu

With any application you’ll need to know how to add pages and menu items that users can click so they can get to your page. After all, one of the things you SHOULD do with your DappStarter projects is to customize them to fit what you’re doing. Luckily, DappStarter’s architecture makes this easy. 

We’ll follow these steps to add a page in the DappStarter menu:

Here’s a quick video walkthrough of creating a page and adding it to the menu:

Note: Client Preview Button
If you are wondering if this is what your final dapp will look like, I’d like to introduce you to the Client Preview Button. When I first saw this interface I wondered how I could restructure it and move things around. Keep in mind that the view you start off with is the DappStarter view. That is, this is the tool you are using to build your dapp. And yes, we are providing a preview, but you can easily view your dapp without the DappStarter tools by clicking the Client Preview button in the top right corner of the screen. This will open a new tab where you are see your dapp from the view of how your end-users would see it.

Here’s a side-by-side view of the “My Test Page” in DappStarter and viewed by itself:

Notice the difference? It’s just as you would expect. The Dappstarter view on the left shows your dapp preview embedded in the DappStarter toolkit and the view on the right shows your dapp as it would exist on the public web.

Now, let’s change some styling...

Change a CSS Style

Now that we’ve successfully added a page and viewed your dapp as it will look to end users, next we’ll update a style in the dapp. Just as you’d like to add pages in your dapp, you should also know how to update and customize the styling of the application. 

To update a style we’ll do the following:

You could also easily update the dapp layout by updating the HTML code in the let content = html function of your page, simply update it as desired.

Here’s a quick video walkthrough of updating a style in your dapp:

Remove the Block Logo
There’s a TryCrypto logo on the right hand side of the page. This logo is there because we copied and pasted the page from the starter page. The good news is that we can remove this logo by simply commenting out or deleting one line of code. 

In the render() function of your code you’ll find the HTML code for the page. In that code is a line ${unsafeHTML(DappLib.SVG_ICONS.block))} and all you need to do to remove the logo is to remove that line of code. In the screenshot below I’ve simply commented it out for ease of illustration.

Upload a File to IPFS

If you’re not familiar with IPFS it stands for InterPlanetary File System. Yes, the name is unique, but so is the service! IPFS is decentralized file storage. That is, your files aren’t living on Azure, AWS, or any other company-owned servers. Rather they are living on servers all around the world, which directly illustrates the point of decentralized storage.

NOTE: If you aren’t seeing an IPFS page in your dapp, then that means during the feature selection process you did not choose IPFS documents.

Let’s look at how easy it is to upload a file into IPFS:

Make a GET Request for Data

One item that always made me feel more comfortable when developing was being able to complete tasks that are common to development, tasks such as easily making an HTTP GET request for data. This is not directly related to DappStarter or decentralized development, but it could be depending on how you structure your dapp and should you use data exposed on or accepted by an API. 

Depending on the language, application, and project structure, making GET requests can potentially happen in various ways. In DappStarter, we’ll use the modern JS way of doing this and we’ll be able to log data to the console in just 3 lines of code. 

Given that we just created a test-page.js, we’ll just drop these lines in the constructor function. We’ll use the fetch method and just drop in a GitHub link to commit to the DNN open source project repo. We’ll then log that data to the console, just to confirm that we’re getting back the data we anticipate.

        .then(response => response.json())
        .then(response => console.log(response));

Don’t Look Now, You’re Becoming a Blockchain Developer
If you’ve made it this far, congrats you’re making great progress! You’ve built your first dapp, made some slight modifications, and are getting a good grasp on the application. As you would imagine, now it’s time to move a little deeper into the code and tie it all back to concepts we covered earlier in this series. Our goal is to not only show you what to do, but to help connect the mental dots as to why things are done in certain ways.

Share your progress!