The create-react-app-blog from sanity-io

create-react-app-blog's Introduction

This project was bootstrapped with Create React App.

Getting the App Up and Running

git clone and cd into the project

React App

npm install to install all dependencies
npm start
Navigate to localhost:3000 to view app

Sanity Studio

To get our Sanity Studio up and running, we need to have a projectId in src/client.js. If you already have a projectId then be sure to add that value there. Otherwise you will need to sanity init. All instructions are below.

If you already have a projectId:

Run the command cd mysanityblog
Run sanity install to install Sanity dependencies
Add projectId to src/client.js
Run sanity start
Navigate to localhost:3333 to view Sanity Studio

If you do not have a projectId:

Run the command cd mysanityblog
Run sanity init
Answer the following questions:
- Create new project — Hit Enter.
- Your project name: — We can name it whatever we would like. Let’s use My Sanity Blog for this project.
- Use the default dataset configuration? — The default dataset configuration has a public dataset named "production", let's stick with that. So type in "Y" and hit Enter.
- Project output path: — This will show us the path where our sanity project will live. The path should show the path that leads to this: /sanity-react/mysanityblog. Hit Enter.
- Select project template: — Here we are going to choose Blog (schema). Using the arrow keys, navigate to that so it’s showing blue. Hit Enter once there. Success!
Add new projectId to src/client.js (detailed instructions below)
Run sanity start
Navigate to localhost:3333 to view Sanity Studio

Sanity Management

Connecting the React app and Sanity project can be done with the following steps:

Navigate to manage.sanity.io
Click on the name of your project (name was created during sanity init)
Find the projectId at the top of the project's dashboard.
- Navigate to src/client.js in the code and insert the projectId where it says "YOUR PROJECT ID HERE"
Back in the project's dashboard, go to the "Settings" tab
- Click on API
- Under "CORS Origins" click on "ADD NEW ORIGIN"
- Insert http://localhost:3000
- Click on "ADD NEW ORIGIN"

Happy Blogging!

create-react-app-blog's People

Contributors

Stargazers

Watchers

create-react-app-blog's Issues

Refresh loop

After running npm run start the site loads at http://localhost:3000 but is stuck in an endless refresh loop.
I'm running the code from this repo with no modifications.

Undefined Error On Blog Post Without Main Image

First of all, pretty good guide. I was able to follow from start to finish and it worked out just fine. Just wanted to point out that if you have a blog post without a main image, the img tag below, which is found in the AllPosts.js file will throw an error.

<img
    className="w-full h-full rounded-r object-cover absolute"
    src={post.mainImage.asset.url}
    alt=""
/>

A possible fix for it is to check for undefined first, before rendering the img tag. Something like this:

{typeof post.mainImage !== 'undefined' && <img className="w-full h-full rounded-r object-cover absolute" src={post.mainImage.asset.url} alt="" />}

Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

I followed the tutorial but the code in this project is 2 years old and doesn't seem to work with newer installations of react-router-dom.

Given the current App.js and "react-router-dom": "^6.3.0", I get this error:

[Error] Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
	performReactRefresh (bundle.js:46405)
	(anonymous function) (bundle.js:761)

Recommend Projects

sanity-io / create-react-app-blog Goto Github PK

create-react-app-blog's Introduction

Getting the App Up and Running

React App

Sanity Studio

Sanity Management

create-react-app-blog's People

Contributors

Stargazers

Watchers

Forkers

create-react-app-blog's Issues

Refresh loop

Undefined Error On Blog Post Without Main Image

Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent