adrianhajdin / project_professional_portfolio

This is a code repository for the corresponding YouTube video. In this tutorial we are going to build and deploy a real time chat application. Covered topics: React.js, SCSS, Framer Motion, Sanity
https://jsmastery.pro
2.07k stars 495 forks source link

Tutorial is not compatible with Sanity V3 #47

Open RobWattCT opened 1 year ago

RobWattCT commented 1 year ago

The steps in the video do not work with the latest version of Sanity, version 3.

i.e. It's no longer possible to follow the exact steps of the video's Sanity setup and result in getting the Sanity Server up and running with the schema displaying.

There's a new prompt to setup the project for TypeScript (yes/no ?). Need clarity on that.

The project uses a schema.js file inside /schemas/, but installing the latest Sanity generates index.js file, with different code to schema.js (excluding what gets added to pull in the project's other schemas files).

It would be great if this could be addressed or if I could get some help on a workaround as I would love to build this tutorial without roadblocks.

@adrianhajdin and team, I love your work! Thank you for investing into the community.

hasanizmir commented 1 year ago

Hi @RobWattCT ,

import works from './works'
import testimonials from './testimonials'
import brands from './brands'

export const schemaTypes = [works, testimonials, brands]
npmRunTheWorld commented 1 year ago

The fact is sanity v3 and v2 has various connection process however the v2 method works for v3. The only difference for me was to use npm run dev on the backend folder instead of sanity start. Other than that everything is still the same. Good luck.

BurningVertex commented 1 year ago

export const schemaTypes = [works, testimonials, brands]

Just wondering if you have some steps to get this working in V3? also where are you adding the above? in index.js? do we just delete the old schema.js? is it now unused?

yomi3tech commented 1 year ago

export const schemaTypes = [works, testimonials, brands]

Just wondering if you have some steps to get this working in V3? also where are you adding the above? in index.js? do we just delete the old schema.js? is it now unused?

Specifically in the index.js files and export as stated, everything should work perfectly even with version 3 but the React Tooltip is deprecated in this version to "Tooltip ", and at the backend, Sanity start is now npm run dev

BurningVertex commented 1 year ago

export const schemaTypes = [works, testimonials, brands]

Just wondering if you have some steps to get this working in V3? also where are you adding the above? in index.js? do we just delete the old schema.js? is it now unused?

Specifically in the index.js files and export as stated, everything should work perfectly even with version 3 but the React Tooltip is deprecated in this version to "Tooltip ", and at the backend, Sanity start is now npm run dev

Thanks, i decided to recreate the project from scratch fresh sanity install. Though I'm having the issue with the tooltip. Any chance you can post a code snippet from skills.jsx?

Code-Parth commented 1 year ago

The steps in the video do not work with the latest version of Sanity, version 3.

i.e. It's no longer possible to follow the exact steps of the video's Sanity setup and result in getting the Sanity Server up and running with the schema displaying.

There's a new prompt to setup the project for TypeScript (yes/no ?). Need clarity on that.

The project uses a schema.js file inside /schemas/, but installing the latest Sanity generates index.js file, with different code to schema.js (excluding what gets added to pull in the project's other schemas files).

It would be great if this could be addressed or if I could get some help on a workaround as I would love to build this tutorial without roadblocks.

@adrianhajdin and team, I love your work! Thank you for investing into the community.

You can do this schema at ./schemas/index.js for V3

export const schemaTypes = [
    {
        name: 'works',
        title: 'Works',
        type: 'document',
        fields: [
            {
                name: 'title',
                title: 'Title',
                type: 'string',
            },

            {
                name: 'description',
                title: 'Description',
                type: 'string',
            },
            {
                name: 'projectLink',
                title: 'Project Link',
                type: 'string',
            },
            {
                name: 'codeLink',
                title: 'Code Link',
                type: 'string',
            },
            {
                name: 'imgUrl',
                title: 'ImageUrl',
                type: 'image',
                options: {
                    hotspot: true,
                },
            },
            {
                name: 'tags',
                title: 'Tags',
                type: 'array',
                of: [
                    {
                        name: 'tag',
                        title: 'Tag',
                        type: 'string'
                    }
                ]
            },

        ],
    },
    {
        name: 'testimonials',
        title: 'Testimonials',
        type: 'document',
        fields: [
            {
                name: 'name',
                title: 'Name',
                type: 'string'
            },
            {
                name: 'company',
                title: 'Company',
                type: 'string'
            },
            {
                name: 'imgurl',
                title: 'ImgUrl',
                type: 'image',
                options: {
                    hotspot: true,
                },
            },
            {
                name: 'feedback',
                title: 'Feedback',
                type: 'string'
            }
        ]
    },
    {
        name: 'brands',
        title: 'Brands',
        type: 'document',
        fields: [
            {
                name: 'imgUrl',
                title: 'ImgUrl',
                type: 'image',
                options: {
                    hotspot: true,
                },
            },
            {
                name: 'name',
                title: 'Name',
                type: 'string'
            }
        ]
    },
    {
        name: 'abouts',
        title: 'Abouts',
        type: 'document',
        fields: [
            {
                name: 'title',
                title: 'Title',
                type: 'string'
            },
            {
                name: 'description',
                title: 'Description',
                type: 'string'
            },
            {
                name: 'imgUrl',
                title: 'ImgUrl',
                type: 'image',
                options: {
                    hotspot: true,
                },
            },

        ]
    },
    {
        name: 'skills',
        title: 'Skills',
        type: 'document',
        fields: [
            {
                name: 'name',
                title: 'Name',
                type: 'string'
            },
            {
                name: 'bgColor',
                title: 'BgColor',
                type: 'string'
            },
            {
                name: 'icon',
                title: 'Icon',
                type: 'image',
                options: {
                    hotspot: true,
                },
            },

        ]
    },
    {
        name: 'workExperience',
        title: 'Work Experience',
        type: 'document',
        fields: [
            {
                name: 'name',
                title: 'name',
                type: 'string'
            },
            {
                name: 'company',
                title: 'Company',
                type: 'string'
            },
            {
                name: 'desc',
                title: 'Desc',
                type: 'string'
            }
        ]
    },
    {
        name: 'experiences',
        title: 'Experiences',
        type: 'document',
        fields: [
            {
                name: 'year',
                title: 'Year',
                type: 'string'
            },
            {
                name: 'works',
                title: 'Works',
                type: 'array',
                of: [{ type: 'workExperience' }]
            },
        ]
    },
    {
        name: 'contact',
        title: 'Contact',
        type: 'document',
        fields: [
            {
                name: 'name',
                title: 'Name',
                type: 'string'
            },
            {
                name: 'email',
                title: 'Email',
                type: 'string'
            },
            {
                name: 'message',
                title: 'Message',
                type: 'text'
            }
        ]
    }
]
AnmolChauhan123 commented 1 year ago

The prompt to use typescript is not showing anymore and it automatically installs all the files of typescript. Anyone know how to change this???]

enith2478 commented 1 year ago

For the people having trouble with the different versions of Sanity What you have to do is to import your file name into the script.js file inside the schemas folder:

import tesstimonials from "./testimonials"
export const schemaTypes = [testimonials]

You create the "testimonials" file as instructed in the video and skip creating a chema.js file

FredDaFed commented 1 year ago

Sanity V3 -vs- V2


For what its worth, here is my input that fixed the issue when using Sanity V3 -vs- Sanity V2 CONSIDER the MIGRATION documentation for Sanity below: SanityMigrationV2ToV3 Migration Cheat Sheet

INSTALLATION

  1. Use:
    npm install openai@latest

    NOTE: use SUDO if not a root user and/or have issues installing from the command. This WILL INSTALL the latest version as V2 of Sanity is deprecated. If you want to BOOSTfreemium from JavascriptMastery2022, you can follow the tutorial but say 'Y' to install version 3. What was seen in the tutorial were these commands:

    npm install -g @sanity/cli

    Select: -Y to install version 3 Then

    sanity init --coupon javascriptmastery2022
  2. Do not select TypeScript if you just want to use javascript and follow the tutorial
  3. Everything else is pretty musch self explanatory. To Initialize: AVOID
    sanity start

    USE INSTEAD @/backend_sanity directory

    npm run dev

    schema.js -vs- index.js

    index.js is used as an entry point in V3 instead of schema.js that was used in V2

  4. In the index.js, add the following:

    index.js

    
    import works from './works'
    import testimonials from "./testimonials"
    import brands from './brands'
    import abouts from './abouts'
    import experiences from './experiences'
    import skills from './skills'
    import workExperience from './workExperience'
    import contact from './contact'

export const schemaTypes = [testimonials, works, brands, abouts, experiences, skills, workExperience, contact]


**NOTE:8** This is after you copy the assets in the schemas directory. The above syntax is demonstrating how to invoke the content added in this directory. V2 is much different: 
![image](https://github.com/adrianhajdin/project_professional_portfolio/assets/111554585/f7dd4209-e4ae-48ff-ac6b-b400c88dea5f)

## `RESULTS`

![image](https://github.com/adrianhajdin/project_professional_portfolio/assets/111554585/a17cacdb-ad13-4f6e-ba20-0dec9363dc9f)
![image](https://github.com/adrianhajdin/project_professional_portfolio/assets/111554585/78ed4882-692c-4c3b-bd89-dbd7b2f8aaed)