This post will be a step by step guide on two ways to sell a React component. I know what you’re thinking…. Sell a React component? Who does that?
Hopefully, you will and here’s why. Aside from making some money, think about the last project you’ve built or the last company you were a part of. How many times did you grab code on GitHub? How many of those projects had the “Buy me a coffee ” sticker, a Patreon shoutout or some other form of ask for payment? Great now how many of you paid? Right…zero… So the developers making these amazing components we all rely heavily on made exactly $0 for the benefit you got out of using the component. Couple that with the big cloud vendors openly abusing open source and we’ve got ourselves a problem that deserves some attention.
Anyways, off the soapbox and on to the how-to.
First up, our component. Yes yes, a very impressive react component with a few logos.
Great though, now that the code is done, let’s get it into GitHub. I’ll first create a private repo and show how to sell it on SugarKubes, then I’ll make the repo public and show how to sell it on LIGIT.
What’s the difference between SugarKubes and LIGIT? SugarKubes is for when you want to keep the code private. When someone makes a purchase they get added as a collaborator to the private repo. LIGIT is the opposite. You keep the code open source and monetize via a license. So someone will purchase a license for your project and then be able to use it however they need to.
Once the code is in GitHub, we can head over to SugarKubes to get a checkout link.
After signing up you’re going to have to request to become a seller. We try to ensure only the highest quality code get’s on SugarKubes so each seller and each item you’d like to sell goes through a review process.
To get started, request to be a seller. It generally takes only a few minutes to get approved. The review process is intended to make sure that everyone using the platform can rely on high quality, safe code to use. If even one component got through with a security issue, you could imagine how much trust would be lost for others on the platform.
Once you’re approved, open up the nav bar and go to “My Projects”. You will see a “+” button on the lower right hand of the page. That will bring up a modal for you to add your project.
Once the modal is up, it’s populated with your GitHub username. You can just type the title of your project and click “Check Repo”. We just check that we have the correct permissions to add users as collaborators to the private repo before allowing you to add it. Once the repo is connected, you can choose between two different types of business models: A subscription, or an access-based business model.
The subscription model, of course, allows you to charge a recurring fee each month for access to the repo. Once the user stops paying, they get removed as a collaborator. The idea is that they will be purchasing future updates or new features. Be careful about choosing this business model. If you don’t make regular updates, or further provide value by answering support questions, for example, people are going to stop paying. You’ll have angry customers who will be hesitant to buy from you again and you will lose trust as a seller.
The access model is simple. They pay some amount and get access in perpetuity to that repo, future updates and all. It’s simple and is probably the right choice to start out with for your first project. Once you get a few sales and a few other projects, you can experiment more with the business models.
After you’ve created the project, you’ll be able to copy a link or an iframe snippet. You can embed the link or the iframe snippet on a marketing site, or a demo site if you’d like or even another GitHub repo. Users will also be able to search for your project on SugarKubes itself.
A few notes on how to make sure the project shows up how you’d like it to. Fill in the description and the topics on your GitHub repo.
People are able to search through projects on SugarKubes via topics and descriptions so the more accurate you make it, the easier someone can find your project.
That’s pretty much it on your end. Users will now be able to purchase your project by visiting the link. Once they do, they will automatically be added as a read-only collaborator (they can pull but cannot push code).
You’ll be notified when someone makes a purchase but don’t have to take any action. You’ll be paid out through Stripe direct deposit, and can easily manage support and bugs using GitHub’s native controls for issues and other items that come up. Be responsive and respectful!
Now on to LIGIT!
Now that you know how to sell a component on SugarKubes, why does LIGIT exist? LIGIT provides a way for people to keep their code open source and monetize by selling a license for commercial uses. Some poeple like the idea of closed source that only buyer’s can see after they make a purchase, others like their work to be completely open source. It’s a matter of preference for the developer to choose.
LIGIT provides a licensing mechanism that allows the code to remain open source but in order to put it into a product that is sold, or that is otherwise monetized, they will need a license to do so. LIGIT is the medium to create and enforce license compliance.
Let’s go back to our GitHub repo and make it public now.
Let’s create an account on ligit.dev and click on “Sell A Project”
Once you’re on the projects page, similar to SugarKubes, click the large “+” button on the lower right hand of the page and fill out the form.
LIGIT is a little different in that we don’t need to hook up our GitHub account. In fact, this means you can use LIGIT on other git repositories like GitLab or BitBucket!
Once the project is created you’ll see a few items to help you start selling. The first is a README embed. This is a little sticker you can put in your readme that tells people they need a license to use the repo in a commercial product and provides a link directly to your checkout page.
Click on the “README Embed” and let’s go back to GitHub and paste the snippet into our README.md file. After saving, you’ll have a badge that now shows the image and people can click on the embed to go directly to LIGIT.dev to purchase a license!
Now let’s update your license. Go Back to LIGIT.dev and click on “License Text” in the same location as the “README Embed” was. Once that’s on your clipboard, create a new file called LICENSE in your repo and paste in the contents.
The license itself is based on the MIT license, with one key provision. The MIT permissions only apply after they have purchased a license guaranteeing your legal protection.
That’s it! Now people can buy your open source project and you can directly monetize open-source code. Pretty neat huh?
I’d love to hear your feedback on product improvements or suggestions, which do you prefer, LIGIT or SugarKubes? Feel free to reach out on twitter if you have any questions!