Build your first blog using React | Sanity.io
This is a pretty good guide to building a blog using ReactJS and Sanity. That said, I did run into a number of issues while trying to follow it. This post is about the issues I ran into and the solutions for them.
When I got to the part where it says to run sanity init, I got errors in Visual Studio Code saying the PowerShell script is not digitally signed, so it's not allowed to run. The fix for this was to run: Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Bypass -Force in the VS Code terminal.
Then I got the error Error: self signed certificate in certificate chain. Looked it up online and found that it seems to be caused by my VPN connection. I disconnected from my work VPN and it did resolve my issue.
I got all the way to the part of the guide where I was Building the page for all the blog posts. After following the instructions and copying the provided code into src/components/AllPosts.js , I kept running into a post.mainImage undefined error. It turns out, the provided code is expecting all posts I created in Sanity to have a main image. I had one for my first post, but didn't add one to my second post.
The fix for the issue above was to replace <img src={post.mainImage.asset.url} alt="" /> with {typeof post.mainImage !== 'undefined' && <img src={post.mainImage.asset.url} alt="" />}.
What that new line of code does, is check if post.mainImage is NOT undefined, and if so, render the img tag. If it was undefined, as is the case with my second post, it wouldn't render the tag, thereby avoiding the error.
After finishing the guide, I needed to figure out how to deploy the React app to Netlify. Posts online say it is as easy as dropping a Build folder into Netlify. However, there's no Build folder in sight in VS Code. Turns out, I had to run npm run build to generate the Build folder and its contents. After that, it was as easy as dropping the folder into the Netlify's deploy folder. You can find the live site on here.
Initially the site would load, but the blog posts wouldn't show up. The fix for this was to add the site url, https://laughing-lamarr-50f7df.netlify.app, as a CORS Origins entry in my Sanity account's API settings.
Tags: #ReactJS #Blog #Bookmarks
Discuss... or leave a comment below.