Today we're going to look at how we can actually publish the component that we've been building for a streamlet So what that means is we can actually pip install the component and then use it You know or any stream that app Just as we would a normal Python Framework so we pip install it and then we just Import and you should use it.

So This is a article been putting together and that kind of covers this so we're basically just going to be going through this And what you're going to see at the end is we can actually do this. So you see here we have this From st card component import card component and then we just do card component titles the title body link And this and that will create our card Okay, so it's it's really There's not that much to go through.

It's pretty straightforward. I think so Let's let's jump into it so a little bit of Background on how PIP is actually working here when you PIP install something you're actually installing it from this here the Python package index. Okay, so put all piping. Yeah, I think that's how you pronounce it and Like I can go in here and I can search for like pandas And it's gonna show us pandas or it's gonna show us a lot of different pandas, I think it's this one Okay.

Yeah pip install pandas at the top there now we can also find the St. Card component. I've already built beforehand So if we open this So I think it's this one. Yeah, it's like version 0.10 at the moment So this is the current component look there's me and you can install that but that's it's slightly different to the component that we have been putting together and not as generic I Built it for a particular use case, which you'll probably see pretty soon So what we're going to do is create another St.

Card component to or something. I don't know you have to give it a unique name. So we can't use the same name again So we'll go ahead and start with that So we'll go to our project Template st card component now There's a few things we need to do for this, so the first one is create a Build distribution for the react component or reacts part of our component so we'll Come into I think here and we'll do that at the moment.

There's no build Directory, we're going to make one so We need to open a terminal window for that. So I'm just pulling one up now Okay, and I'll just navigate to this directory so documents Projects So component component template Template And then in there we want to go st card component We might need to we might need to change the name of this by the way, I'm not sure and front-end Okay, so from within here we need to use note package manager to create the build distribution So if we come to the article Oh That is something we also need to do so let's not forget that so Before we before we do that.

We also need to Go to init.py and Up here. We need to make sure we set release to true now Release is false whilst we're putting everything together But as soon as we want to actually distribute it or publish it. We need to say it's true. So Beforehand this is this was being Run, okay, so it was saying you need to load st card component from localhost 3001 obviously when people using this component in the future, they're not going to be running the component on the localhost Instead what they are going to do is they're going to download our package which is going to contain this front-end build distribution the directory and From there, they'll they'll get the the component it will be built from there.

Okay So, I think I don't know. Is there anything else? Oh and also this this will not be run anymore So this is like the demo app that we're putting together before that will no longer be run so Yeah, that's fine. We just need to change that nothing else needs to be changed Then we're now our front-end directory we just write this npm run build Let's do that Let me open this so we can see what's going on here Okay So hopefully this will go well and We'll see build directory up here in the front end on the left Might take a moment as well Okay, so the build folder is ready to be deployed and we can come over here and we see we have build and it has all of these so This is our this is our component in JavaScript, okay now with that we can We have the build distribution for the actual react component And now we need to create the distribution for the Python distribution.

Okay, so Let's go ahead and do that Scroll down a little bit So this is one thing. I think we need might need to change so changing the name parameter and set up the pie Because at the moment it's see card component. I Don't think it needs to be that anymore Yeah, I think I'm going to need to change this To ST card component - So let's go ahead and do that Okay, so we have in it pie here we're going to go to set up the pie so here we have the name of Component and I think we'll also need to change this template name So this will be ST card component - Okay now Now we should be able to go ahead and create the component or create the Python component Okay, first we need to Python Set up pie we need to write s dist and be dist wheel like that Okay, we run now and we should find a so we need to go one more I'll fold it up And then run it again so from this we'll find that we get a this folder here so dist So in here, we should find we have this list tar file and this wheel file and It's those two that we're going to upload to the Python package index and To do that.

We're going to need something called twines so We first install out pip install twine. I already have a download. So when I run it again and Then we run Python M twine upload and Then we need to specify that we're going to upload it to The Python package index and the only other I think option you have here is a test Python package index Which can be quite I would recommend you look into that and like if you're putting a package out there That's quite good to test that the package is going to work I Have a video and article I think on Python packages, so maybe I'll put a link to that in the description so you can take a look if you're interested in figuring this out a bit more so we're just going to go with the Python package index rather than the test Python package index and We want to specify that we're going to be pulling everything from the distribution Folder, okay, so Let's run that it will ask us to log in so my user name Well, this is another thing so you will need to sign up on the same website I mentioned before it's I think Pi PI dot org So you need to sign up, and then you can go ahead and do this File already is this okay, so this is because I already have You see here is using st.

Card component, so I need to make this St. Card component - so we'll go through everything in here, so this actually I didn't need to Rename that all so we can ignore that so Let's rename all this to - it's also in in it PI This one don't really need to change, but we'll do anyway - anything else in there, I don't think so so delete this I'll delete the distribution folder and the build folder.

I don't know okay delete that as well And then in here we need to change this because the directories change So the manifest and also in set of PI Changes to - as well Okay, now let's rerun this again So we come to this Python. Yeah run that credit distribution folder and Then we're going to use twine again, so hopefully this time it'll work Okay, so now we have st.

Card component number two we can go ahead and actually Have a look at that website, so Come over here You Okay, so we can pip install, and this is a version number. We don't actually need that so let me Okay here, we just pip install st. Card component number two.

Let's copy that across I'm going to do that in my stream lit environment Okay Now while that's downloading. I'm going to come over here. I'm going to open or create a new directory actually so Do from here, okay? So make directory We'll call it st. Demo I'll open that in vs.

Code. Okay, and then in here. I'm just going to create a new file app pie in here Let let me copy it across from from the article Quicker So where are we here? It's actually just okay, so copy this Pull into here st. Card component number two Okay, save that and now let's run it from here So see the st.

Demo and run stream lit run Up top pie okay localhost and here we go, so this is our Package or distributed St. Card component Click here make sure it's working. Oh, yeah perfect so Yeah, that's does everything for this kind of short series on custom components in stream lit I Hope it's been useful and Yeah, that's it.

Thank you very much for watching now. See you in the next one