Making money with your React UI library.
Introduction to Library Market Place
AI Generated Video Summary
This Talk provides an introduction to the library marketplace, focusing on selling NPM packages and building UI libraries. It explains the steps to publish a UI library and how clients can install the package. The marketplace dashboard enables setting subscriptions, pricing, and tracking downloads and purchases. Developers receive payments through PayPal on the 20th of each month.
1. Introduction to Library Marketplace
Hi, my name is Brandon and I'll be talking about introduction to the library marketplace. In this slide, NPM Package Marketplace. Ever wanted to earn money selling those cool NPM packages that you have created? Building a UI library sample to sell. Building your React components that people love to share. Here are the steps on how you're going to publish your UI library into a marketplace. Now how your client or customer can install your package. There's two ways.
Hi, my name is Brandon and I'll be talking about introduction to the library marketplace. Here I'll be talking about a couple of contents.
NPM Package Marketplace, building a library sample to sell, and a marketplace dashboard, and how the developer gets paid, and also a frequent FAQ.
So in this slide, NPM Package Marketplace. Ever wanted to earn money selling those cool NPM packages that you have created? Make a living off your open source work that provide premium features open source projects, sell your code as NPM packages, you have totally 100% access control packages, and you also deploy your private packages.
So, before we start, building a UI library sample to sell, you need to think about how you're going to sell your React components or UI libraries or plugins that people love to use. Of course, you need to have good documentation on how you're going to sell your project. Prepare to publish into a private package to a marketplace called pref.js. Steps to install your package, so I'll show you in the next slide.
So, building your React components that people love to share. For example, you have a carousel or a loader that you want people to download and install. You have to build a documentation that suits your customers. and how your React components can be installed, whether it's a freemium or a paid users. Here are the steps on how you're going to publish your UI library into a marketplace. First, all you have to do is just add the following in your package.json file. You have to insert a publish config. Target to R.previewjs.com. This is the registry on where you're going to publish your npm package. Second, type the following in your terminal. npm login registry stps-r.previewjs.com. After that, it will ask you to enter your username and password. Or you can just enter your email address that you have registered with PreviewJS. Then after that, type npm publish and you're done. So your package will be uploaded to PreviewJS.com. Now how your client or customer can install your package. There's two ways. One is for guest users and the other one is for register users. Before your user can download or install, you have to set the config registry target to r.previewjs.com. After that, you have to log in to their website, previewjs.com, and then install your package. Don't worry.
2. Installation, Dashboard, and Payments
The previewjs will send an email on how to install to the client after they purchase your package. For guest users, you have to provide the authentication token. Next, you need to install your package using a private scope or other methods. The marketplace dashboard allows you to set subscriptions and pricing for individual and organization use. You can track the downloads and purchases of your package in the dashboard. Developers get paid through PayPal every 20th of the month, with integration options and additional charges to consider.
The previewjs will send an email on how to install to the client after they purchase your package. For guest users, you have to provide the authentication token. You will be able to find it in your dashboard account settings.
Next, after that, you need to install your package. Normally, we'll use a private scope. As you can see here, we have a private scope at bc, or you can name it to whatever private scope you want, plus your package json, package modules. So, these are the other ways on how to install your package.
First, you have to log in and set your registry target to privileges.com. After that, you do the npm install, your package name, registry to r.privies.com.
This is the marketplace dashboard. In this dashboard, we have two options, one is for individual and the other one is for organization. Individual is for personal use and organization is for companies or large companies or multiple user teams that will use your package. So, here you can set your subscription, can set the amount that you want for your package, whether it's monthly subscription, one time, or yearly. Same with the organization. These are the basic dashboard settings. You also have advanced settings for your pricings. So, this gives you more properties that you can set for your package.
Now, how do you know your package is being downloaded or being purchased? In the dashboard, you can go to your package and then select your package. After that, it will show reports wherein your package is being purchased, when it's being purchased, and whether you want to revoke it or just leave it as is. It will also show you the version of your package, what is the published version, and how many people download your package. And here you can have the configuration on how to install your package and also the instruction.
How do developers get paid in Prevjs Marketplace? First, you need to have a PayPal account. Sign up a PayPal account and then add the PayPal register email. After that, save it. And then the payment will be set every 20th of every month. You will receive your payment every 20th of every month. Things that you need to take note with your PayPal account. Make sure that your PayPal integrates with your local banks and make sure that you know the additional charges. For example, transactional fees, international fees, international fees, charges, and so on.