How to add a preview of your React (or any other) site when sharing it

Erik Karlsson — Tue, 15 Jun 2021 09:41:50 +0000

Are you struggling with having your website preview looking something like this:

Whenever you're sharing it on linkedin/facebook/etc, when you're really looking for something like this:

I had this exact same issue and solved it. Let me show you how.

The magic is all in the index.html file. Sites such as Linkedin and facebook, and even Discord, use something called the Open Graph Protocol, and this allows you to specify how you want your preview to look like.

This you will specify in the <head> tag where you have your usual <meta> tags such as <meta charset="utf-8" /> etc.

The syntax is:



<meta property="og:title" content="Title-name">
<meta property="og:image" content="File-path">
<meta property="og:url" content="Canonical-url">
<meta property="og:type" content="website">

These four tags are required. There's also optional tags, the most commonly used being og:description. You can read more about all the types of tags here.

The image can be anything you want - from very abstract to an actual preview of your site. I made mine by squeezing up my site and finding the right place to screen dump, then I put it in the assets folder, and I declared it by: ```property="og:image"

content="https://erikkarlsson.dev/assets/prev.png"


Together with everything else in the header it looked like this:
```HTML


<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

<meta property="og:type" content="website">
<meta property="og:title" content="Erik Karlsson">
<meta property="og:description" content="Portfolio page made by Erik in React.">
<meta property="og:image" content="https://erikkarlsson.dev/assets/prev.png">
<meta property="og:url" content="https://erikkarlsson.dev">

...

Which looks like this when sharing it on Linkedin:

And that's how you do it! Check out this if you want to learn more about this topic.

Why it's not worth setting up a server yourself - even to save money

Erik Karlsson — Sun, 13 Jun 2021 19:32:17 +0000

I recently made myself a pretty portfolio page in React. Now it was time to set up a server to host it. After some inspiration I went on a journey to set it up via Raspberry Pi. This felt like the truest way. Not gonna use some pesky easy-hosting on some GoDaddy-site, it was time to do it the real way.

So I ordered a sweet rpi 4 2gb starter kit, and I felt like a child on christmas. I was actually stuck with Windows on my Surface Laptop, for which there are no keyboard/mouse drivers for Linux -> so it was very nice to finally work in a GNU/Linux environment again.

After I received my Pi, I went through the jazz - downloaded everything I needed and - bear with me if you've not done this before, but I: set up a proxy to my localhost/npm-build in nginx, did port-forwarding in my router and set up the DNS records to point to my ip, together with a dynamic DNS service on CloudFlare to continously update my IP when it changes (sorry, no static IP unless you have a business account my ISP told me). This took some time, but it was a learning experience.

I also set up docker + docker compose for nginx proxy manager, a well-recommended admin tool that manages your nginx projects for you and does a free SSL for you called Let's Encrypt.

Then it hit me. I couldn't log in to the admin panel I just docker-composed. Somehow, it was a bad gateway (?). A big mystery, of which many other people had the exact same issue, and everyone had a different solution, if they had any. Some needed to change a tiny thing, like which DBMS they use, or a big thing, and some just neeeded to wait 10 minutes, or a day, and then it suddenly worked.

I literary spent the next 10 hours on this, seemingly tiny issue, to simply gain access to my own Admin Panel. It so happened that the documentation on the official site was incorrect for raspberry pies, and there actually was a proper way to do it for my tiny device. Well, I followed this excellent guide to the tea. I tried to log in to the admin panel again. Bad gateway.

(How I felt in that moment)

I knew if I really put my head down, and tried harder, it would work at some point. But, the thought came to me, I haven't used my free 1 year trial at Amazon Web Services. Why not give it a quick try?

So I created an account, set up AWS Amplify, and connected my github repository. Then I changed some things in the DNS records to connect it to the server and voilá. AWS did all the work for me, and automatically set up SSL, continous integration/delivery whenever I pushed to my main repository, and handling all the load balancing and DDoS protection for me. I didn't even have to lift a finger more than a couple times. And now it's up and running. For free. At least for a year...

Now, question, what should I do with my raspberry pi now?

Forem: Erik Karlsson

How to add a preview of your React (or any other) site when sharing it

Why it's not worth setting up a server yourself - even to save money