Introduction to Library Market Place

Rate this content
Bookmark
Slides

Making money with your React UI library.

10 min
05 Dec, 2022

Video Summary and Transcription

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.

Available in Español

1. Introduction to Library Marketplace

Short description:

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

Short description:

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
16 min
How to Build Your Own Open Source Project
We all used open source projects every day such as npm packages, editors, web applications, and even operating systems... Have you ever thought of building one of your own? In this talk, I will share my journey building jest-preview, from when it was just a vague idea, to currently a well-adopted library to help frontend engineers write tests faster. I will share with you how to come up with an idea for a project to work on, what is the struggles you have to overcome as an author of an open source project, how to manage time efficiently, and how you get attention from engineers around the world.
TypeScript Congress 2022TypeScript Congress 2022
30 min
Lessons from Maintaining TypeScript Libraries
Maintaining widely-used JS libraries is already complicated, and TypeScript adds an additional set of challenges.

Join Redux maintainer Mark Erikson for a look at some of the unique problems TS library maintainers face, and how the Redux team has handled those problems. We'll cover:

- Tradeoffs of different ways to define TS types for a library
- How to target different versions of TS, and considerations for determining the supported version range
- Migrating existing JS libraries to TS
- Differences between writing "app" types and "library" types
- Managing and versioning public types APIs
- Tips and tricks used by types from the Redux libraries
- TS limitations and possible language-level improvements
React Finland 2021React Finland 2021
28 min
Testing the integrity of your React components by publishing in a private registry
The final stage of a react component is when it is being published and distributed. How can I ensure my packages won’t crash in production? This talk will help you to test your React components publishing them to a private registry and running End-to-End tests against them.