Once we're done building our first 15 project, it's time to see how we can share them with the rest
of the world, so host them online while ton of hosting companies out there, I personally enjoy using
that.
Mathlouthi And in order to follow along, you will need an account.
Now, don't worry.
Sign up is hassle free and I won't ask you for your credit card.
Effectively, we'll cover to set up options drag and drop and the continuous deployment where we will
implement get as well.
And in the process, I'll talk about you gotchas that you need to be aware of.
So if you don't have the account already signed up for a free account and let's get started.
So I'm going to start by navigating back to the desktop can pick whichever project you want, but I
purposely go with 15 because then we have ReachOut.
And one of the gotchas that I would want to show you is regarding React router.
And I'm going to open up the folder because this is where we have on the project.
And then I'm picking 15.
And more specifically, I'm looking for the final.
Please keep in mind that, of course, you can set up the local build using the repo, the main repo.
But just to make it easier, I'm just going to grab the final folder.
So copy and paste in my desktop and I'll want to rename it and I'm going to call this a react project.
So React I ifn project and then of course I'll open up my texta drag and drop and instead of running
and PCM start, what we're looking for is an RPM build, so I'll open up the integrated terminal.
Then of course we would want to install dependencies.
So we're going to go with NPM install and then right away I'm going to go with an RPM and then Iran
build.
So we go with AMPM or on a build and once we install everything of course will perform that local build.
And that of course will be our production ready project.
Since it takes a little bit of time.
I'll stop the video and I'll resume it once we have our production ready project.
And once that is done, of course we should have the build folder where we have our production already
application.
We just need to somehow get it to modify.
So I'll make this once more.
Or you're not can actually minifie it online.
I will make this one smaller.
The net lafi one hour log in and once you log in you'll have few options.
You'll have one new side from Git, which we are going to do next in next video.
However, we also have this option of drag and drop.
So what you're looking for is of course, the built folder over here and you just need to grab the folder
and drag and drop.
Pretty self-explanatory.
Now, once we make the screen size bigger again inside settings, you can change the name of the site.
There it is.
And of course, if you have custom domain, there's a way how you can hook that up as well.
But in this case, you'll just get some generic name and that will end with another fi and landgrab.
So if you want, you can change this part, but you won't be able to change the model for that up.
And of course, you need to make sure that the name is not already taken notice.
If I go here with react and try to save because that name is already taken.
So I cannot do that.
So in this case, I'll just call this time one react project before that name is not taken notice.
Now I have my site ready to go.
I just need to, of course, open this up and there it is.
And of course the project is exactly the same.
Like we had a locally now one.
Gotcha.
But I would like to cover as far as react router when you work with nine to five, whether that is with
a drag and drop or it is going to be with continuous deployment, which again, we're going to cover
in the next video if you want react or to play nicely within Mathlouthi.
And more specifically, I'm talking about the pages.
So, for example, if you'll go to the single page and if you're fresh in this case, everything works,
but it only works because I added the redirects file in the public.
If you want to read more about it in Read Me, you'll find a link where you can find more info.
Why is that happening and what is the fix?
But essentially the fix is somewhat simple.
Where in the public?
Folder we create file on underscore redirect, and then we just add this line of code and just make
sure that Nolfi will play nicely with react or down.
And if you don't have that, of course, you will get some weird bugs if your project is using react
router.