DEV Community

loading...
Cover image for Client-side rendering! Get out of my way!!

Client-side rendering! Get out of my way!!

bassemmohamed profile image Bassem Ibrahim๐Ÿ‘จโ€๐Ÿ’ป๐Ÿ‡ช๐Ÿ‡ฌ ใƒป3 min read

Hey devs from all over the word ๐Ÿค—

Recently, I published my personal website - https://bassemmohamed.me - on the world wide web. It is built using ReactJS and you can check out my short development journey on my latest blog post :

In today's post, however. I would like to share with you my deployment journey. How I deployed my react app on Digital Ocean (my hosting service), what is the issue I ran into and how I tackled it.

Spoiler alert! StackOverFlow helped a lot.

Get it ready for launch ๐Ÿš€

For convenience, I am using Create React App to kick start my project. It helps me focus on coding and forget all about setup and configuration. All I had to do to get my react app production-ready was to run this simple command npm run build. Which bundles the project in the build folder and optimizes it for the best performance.

You could read more about Create React App here.

3.2.1... LAUNCH!! ๐Ÿ‘จ๐Ÿฝโ€๐Ÿš€

I had the build folder ready. My hosting server had apache up and running. All I had to do was to launch the content of that folder into the /var/www/html directory on the server. I used an FTP client called FileZilla. The launch was successful in a couple of minutes. Yaaay!

That's it! Right? Party time? ๐ŸŽŠ๐ŸŽˆ
Turns out, NO!! ๐Ÿ™…

It's not all good and dandy ๐Ÿคจ

The website was technically working. But something big was not right. If I visit any other page and then refresh, I get a 404๐Ÿ’€. Only the home page could be accessed directly by URL. Why is that?! I had no idea! ๐Ÿ˜•

My inexperienced mind was blown to pieces. ๐Ÿคฏ๐Ÿ˜ต

Don't worry!! I ended up fixing the issue ๐Ÿค“๐Ÿ˜Ž (with some StackOverFlow help of-course๐Ÿ˜…). Before I tell you guys all about that. Let's first clarify something. ๐Ÿง

Server-side vs Client-side rendering

Since forever, Websites used to be server-side rendered. You visit a certain directory on the server depending on the route and you end up with an HTML, CSS and JS filled with site's content and that is rendered on the browser.

ReactJS however, doesn't work this way. React is client-side rendered. That means that the server initially responds with an empty HTML template and then React handles the routing and fills that template with content from the server depending on the route.

Ummm, So what? Why 404 though? ๐Ÿง

When visiting a URL like this https://bassemmohamed.me/blog directly. Apache serves whatever in the blog directory on the server (SSR). The problem is blog folder totally doesn't exist. ๐Ÿ˜ณ

The only one who knows about this route is ReactJS (CSR). It should be the one handling the routing not apache. But unfortunately, React didn't even load in the client's browser because it will only be served to the client from the root directory, not the blog. and that is why every router is working fine only if it was accessed through the home page.

Crazy! right? ๐Ÿคฏ Am I even making sense? ๐Ÿ˜…

We can fix it though, Can't we? ๐Ÿค“

Sure, yeah. Turns out, Easy fix too. What we need is to use a .htaccess file to catch all requests to the server and always serve what is in the root directory.

.htaccess file :

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Enter fullscreen mode Exit fullscreen mode

I had to enable the rewrite module in apache and change a bit of configuration. then I added this .htaccess file on the server.

Now hitting https://bassemmohamed.me/blog serves content from https://bassemmohamed.me instead. But then on the browser, React's client-side rendering fires up and renders the content from the /blog.

Ohh, by the way. Here is the StackOverFlow question that saved the day. ๐Ÿค—

That's it from my side โœ‹. Ball's in your court โšฝ. If you like this article make sure to comment below. and if you really liked it. You are gonna have to follow me on Twitter to never miss a future post. ๐Ÿค—

As always,
Happy coding ๐Ÿ”ฅ๐Ÿ”ฅ
โ€œูƒูˆุฏย ุจุณุนุงุฏุฉโ€

Discussion (4)

Collapse
kvsm profile image
Kevin Smith ๐Ÿด๓ ง๓ ข๓ ณ๓ ฃ๓ ด๓ ฟ

Nice! I ran into the same issue hosting React apps on GitHub Pages. Fortunately they also allow you to workaround by redirecting 404s. ๐Ÿ™‚

Collapse
bassemmohamed profile image
Bassem Ibrahim๐Ÿ‘จโ€๐Ÿ’ป๐Ÿ‡ช๐Ÿ‡ฌ Author • Edited

Ummm, I thought Github pages only serve 1 page and that you cannot have any kind of routing ๐Ÿง. I ended up using react's state instead of react router dom to serve all pages content within the home page.

Collapse
kvsm profile image
Thread Thread
bassemmohamed profile image
Bassem Ibrahim๐Ÿ‘จโ€๐Ÿ’ป๐Ÿ‡ช๐Ÿ‡ฌ Author • Edited

Ohh yeah. cool hack, Always happy to see some good hack that saves the day! Thanks Kevin!

Forem Open with the Forem app