Skip to content

Update examples sub-repo#119

Merged
stefanoverna merged 7 commits into
datocms:masterfrom
arcataroger:fix/examples
Dec 19, 2025
Merged

Update examples sub-repo#119
stefanoverna merged 7 commits into
datocms:masterfrom
arcataroger:fix/examples

Conversation

@arcataroger

@arcataroger arcataroger commented Dec 17, 2025

Copy link
Copy Markdown
Contributor

Fix #118

The examples page was no longer rendering.

This updates it to use the latest React version and Vite instead of react-scripts.

Works again after the update: https://deploy-preview-119--react-datocms-example.netlify.app/

DatoCMS Blog — DatoCMS - 2025-12-17 10-56-12 AM

@netlify

netlify Bot commented Dec 17, 2025

Copy link
Copy Markdown

Deploy Preview for react-datocms-example ready!

Name Link
🔨 Latest commit 5320502
🔍 Latest deploy log https://app.netlify.com/projects/react-datocms-example/deploys/694304edba2ea10009aab7bc
😎 Deploy Preview https://deploy-preview-119--react-datocms-example.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@arcataroger arcataroger changed the title Fix #118: Update examples sub-repo Update examples sub-repo Dec 17, 2025
@arcataroger arcataroger marked this pull request as draft December 17, 2025 19:00
@arcataroger arcataroger marked this pull request as ready for review December 17, 2025 19:11
Comment thread examples/public/index.html Outdated

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replaced with the Vite version at /index.html

return (
<div className="example" data-title="Full-blown example">
<Helmet>{renderMetaTags(metaTags)}</Helmet>
{renderMetaTags(metaTags)}

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I regenerated the whole thing from scratch to make sure we have no orphans in it

Comment thread examples/package.json
"eject": "react-scripts eject"
"start": "vite",
"build": "vite build",
"setup": "echo 'Setup is no longer necessary in this version, skipping...'"

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can also modify the Netlify build command to remove this step

Comment thread examples/package.json
"@datocms/cma-client-browser": "^5.2.1",
"react": "^19.2.3",
"react-datocms": "^7.2.4",
"react-dom": "^19.2.3",

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is better to more realistically include it from npm, I think, for people who don't want to build the whole monorepo (parent repo) and just want to use the examples. The setup step and file-based transclusion is kinda messy....

Comment thread examples/vite.config.js
base: './',
plugins: [react()],
build: {
outDir: "build",

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has to be explicitly specified for backward compatibility with react-script's default folder

@deammer

deammer commented Dec 17, 2025

Copy link
Copy Markdown

Thanks for the fix 🙏 if you're taking suggestions, there's also what looks like a debugging line left in the image examples:

onLoad={() =>
setLog((log) => [
...log,
`Triggered onLoad() for element ${ref.current}`,
])
}
/>
</div>
<pre>{log.join('\n')}</pre>

Screenshot 2025-12-17 at 20 26 37

@arcataroger

Copy link
Copy Markdown
Contributor Author

Thanks for the fix 🙏 if you're taking suggestions, there's also what looks like a debugging line left in the image examples:

Not sure what that's about... 🤷 Removed it for now in 5320502, but @stefanoverna may add it back if there's a good reason for it?

@stefanoverna stefanoverna merged commit 952dddd into datocms:master Dec 19, 2025
7 checks passed
@arcataroger arcataroger deleted the fix/examples branch December 19, 2025 17:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Website is down

4 participants