But I want to start, have having design meeting we're having.

We're in a meeting right now.

Okay, So you can put in the comments like what you think a good design is.

I'm gonna explain the best idea I could think of.

And I'm sure a lot of you will have better ideas.

Here's the situation.

I need to make my website scalable so that I can put multiple web applications on my website.

So Ah, I'm using no Js.

I'm also using the express framework.

Our main server file is apt dot Js which is this big, messy, messy, messy file.

All ap I requests go through the slash ap I route.

Any time that you type a route that doesn't start with slash a p I, it tries to grab html and then once you scroll down, you can see that we have, like some a p I routes here.

But now what happens if you want all the sudden integrate a web application?

So look at this fetch description and then there's a whole authentication process here and then there's like I get channel process here.

In this single server file, we have the back end for our main Web site.

We have the front end for our main website and we have another application.

So we have, like, three things going on.

Somebody who's developing the front end could mess up the back end like they can interfere with each other, which just gets, like, all source of messed up way.

Wanna have the back end and the front end to run separately?

We want them to run on separate servers and we want every Web application to also be on it's on a separate server.

That means that our servers need to talk to each other.

We would, ideally like a system that has our front end over here Back end.

Okay, so we have a whole bunch of Web APS Engine X allows servers to talk to each other.

What's gonna happen is every request is gonna go into Engine X, and then Engine X is gonna decide where it goes.

Should it go to the front end, Or should it go to the youth of descriptions up?

Dater, like every application, can be developed by itself.

That way they don't mess each other up.

And if I want to develop a new web application, everything else stays the same.

And all I do is I say engine next point to the Web application.

What if I only have one server?

Well, I only have one server as well.

Port 80 80 can have my front end.

Port 80 81 can have my back end for my main website.

Port 82 can have my YouTube descriptions update.

Er way.

Don't want to use this file for anything related to the front.

What are we gonna use for our front end?

Well, I have been doing a ton of research.

I know that React is a super popular JavaScript library for building user interfaces.

But I found this cool framework called next Js Next Js is a lightweight framework for static and server rendered application.

We don't have to worry about routing much in the app is rendered on the server by defaults, simple client side routing able to implement with express or any other No Js http server the more I started reading about this, the more I was like, Oh my God, this is exactly what I was looking for.

When somebody types a link on my website, if it starts with slash a p I, we send them to the back end server via and n Jinx proxy pass.

Once we get to the back end server, everything is relative to the back end server.

This is perfect for independently working on back and development as we can easily connected to our front end with engine X.

If the lynx does not start with a p, I R server will assume we want to fetch the front end and it will send us to the front and server which will render our html via the next dot Js framework.

So it's It's the next day.

I just figured I should probably create some drawings for you guys so you can see what, Thea how it all comes together.

Microsoft paint here and we're just gonna go crazy, bro way music up in here.

Okay, so after about an hour, I have gone hard core in pain, so I'm gonna zoom way in.

I don't know why I did this in pain, because now everything so pixelated our current server, if you remember single express app serves all data in this situation.

All of the requests go to Engine X looks at the request and then it says, Oh, were we want to go to the home page, so send us to the front end server.

If we want to go to the A P, I send us to port 80 81.

When we look at our YouTube descriptions update, er, all of this is gonna be it could be developed as its own website.

You can see how this system is much more scalable.

So let's look at a way more complicated example off the top of my head.

This took me a while to actually create in paint.

All the requests are gonna go on engine acts.

This system has many server.

These two back end servers are both for our main website.

So these air like duplicates, which means our load balancer is able to route to this one or our load balancers able to route to this one.

So we have a load balancer for the front end server.

We have a load balancer for our database.

So I think last but not least, we need to host our static files somewhere.

So if we have images videos, you know.

So in a complex system they get way more way more complex than this.

There's so much about this project that I don't currently know howto do, like react next.

Yes, I'm basically just gonna spend the next few weeks diving headfirst into these concepts, probably filming it, you know, which is why I'm so excited to share with you guys today.

Sponsor brilliant thought or gets the first website I've seen.

That really resonates with my belief of learning science and mathematics through practical applications.

Instead of memorizing formulas, Cough, cough, school brilliance goal is to build intuition in problem solving.

And that's exactly what I've been doing in my personal projects.

And that's why I feel like I'm so confident to take on any task, and I could just learn whatever I want.

If you're new to programming or want to feel a little more confident, I would recommend the computer science fundamentals or computer science algorithms courses.

If you want to support my channel and learn more about brilliant, go to brilliant dot org's slash Devon Crawford and sign up for free.

Also the 1st 200 people who go to that link will get 20% off their premium subscription.

And it's honestly the coolest thing.

Man, I wish I found out about this three years ago when I have just scavenging through the Internet for knowledge and took me countless hours.

So yeah, thank you, guys for watching this video and keeping along with my journey of teaching myself all this stuff.

You guys are just gonna have to subscribe to see my progress of Of of this?

I don't know.