How I changed my portfolio site from HTML/CSS/ JS to my first React/Tailwind/Hashnode project [Part 3 - Deploy]

How I changed my portfolio site from HTML/CSS/ JS to my first React/Tailwind/Hashnode project [Part 3 - Deploy]

Going Live on the internet, what could happen?

Liam Brewster's photo
Liam Brewster
·Feb 15, 2022·

4 min read

Table of contents

  • Setup Ready For Build
  • Deploy to Vercel
  • Update DNS
  • What's Next

so this is the third installment but such a long delay? why?

so it seemed like I was getting error after error, which definitely tested my patience, and I would run out of time, so had to spread this debugging over multiple days/ weeks to find the issue

Setup Ready For Build

so first thing after ending the last blog post, I did a run build command, for no other reason than it says it gets a production-ready version of my app together, which means I am ready to deploy, so i just pressed it to see what would happen if i am being honest here.

unfortunately, i got an error saying "TypeError: MiniCssExtractPlugin is not a constructor"

Screenshot 2022-02-02 at 00.25.07.png

a quick search on stack overflow I found a solution that I smashed into the terminal and said a hail mary prayer 🙏

npm i -D --save-exact mini-css-extract-plugin@2.4.5

I then ran the NPM RUN BUILD command again and got a lovely message to say, "Compiled with warnings." as I apparently had undeclared variables, which I didn't think I did but onto getting it live. so I am now going to make a PR request with the updated packages into the main branch as I'm still making all changes on my ReactVersion branch first.

Deploy to Vercel

So I logged into Vercel, add a new project against my Github repo, and selected deploy but then I get my next error. The build failed but it looks like its set up as default to not allow you to deploy if it detects something it's not happy with as a warning, so I can turn this off by adding an environment variable, not recommended you do this but just to try to get this online, I will add CI = false.

screenshot-vercel.com-2022.02.02-00_39_28.png

I have now clicked Redeploy and it successfully worked, so I now have a live React Portfolio website on a random Vercel URL, so I need to work out how to get it against my domain

Update DNS

This is where the fun began, so I tried to point this to my domain liambrewster.co.uk but Vercel gave me some errors of that my domain was already in use which it wasn't, after a chat with the support it is a known issue if you have a subdomain with hashnode for your blog, so I followed the support document on hashnode to fix the issue. but in short, you remove the domain from hashnode, apply to your vercel then reapply to hashnode. this stops the error and allows you to assign your domain.

so I am now given the values I need to setup within my DNS A records in order for my Vercel website to be visible, but .......

you guessed it I then got my next error, my emails stopped sending or receiving which was far from ideal timing, so after many days or setting and resetting, i gave up felt deflated and set up against my .com URL which i don't like to use. then after reading a couple of articles with people experiencing similar issues on other providers, it dawned on me that I had my last website on the same server as my emails, so now that i have redirected traffic of liambrewster.co.uk to another server, this would also divert email traffic, so added DNS setting into Vercel to point the mail.liambrewster.co.uk and MX records to the correct server and that seems to have resolved it but time will tell.

so after applying the fix, I was frustrated that it seemed pretty obvious what my error was, but that is all part of the journey of learning, I would like to think i won't do it again, however, I am sure I will

What's Next

so Next..... I want to pad out the site with some more pages such as a better contact page and about me, so this means I will have to look up how to do routing properly.

following this, I want to then work on getting some noteworthy projects that are not bootcamp specials, and if I find myself needing a break, I have made note of some topics I want to write blogs about, that will also beef up the blog site. ( i also want to redesign this section again, and have it auto-populate from hashnode's API if possible)

so lots of things to do and slightly overwhelming of what I feel I need to do, but the unknown element on whether these are big tasks or quick tasks is the worst part, as I cant prioritise efficiently enough to get that feeling of progress. however the fact I have a site and three blog posts is enough for me to reflect on.

please leave a comment and I look forward to the next post

 
Share this