I’m using netlify for deployment but I’m not seeing anything. It looks fine on builder & locally.
I also used create-react-app.
Netlify Link:
Netlify Build Logs:
11:01:24 PM: build-image version: ada486d80800a9a84b567366a5bfe2beab07892e (focal)
11:01:24 PM: buildbot version: ada486d80800a9a84b567366a5bfe2beab07892e
11:01:24 PM: Fetching cached dependencies
11:01:24 PM: Starting to download cache of 106.0MB
11:01:26 PM: Finished downloading cache in 1.523s
11:01:26 PM: Starting to extract cache
11:01:31 PM: Finished extracting cache in 5.459s
11:01:31 PM: Finished fetching cache in 7.022s
11:01:31 PM: Starting to prepare the repo for build
11:01:31 PM: Preparing Git Reference refs/heads/main
11:01:32 PM: Parsing package.json dependencies
11:01:34 PM: Starting build script
11:01:34 PM: Installing dependencies
11:01:34 PM: Python version set to 2.7
11:01:34 PM: Started restoring cached Node.js version
11:01:35 PM: Finished restoring cached Node.js version
11:01:35 PM: v16.19.0 is already installed.
11:01:35 PM: Now using node v16.19.0 (npm v8.19.3)
11:01:35 PM: Enabling Node.js Corepack
11:01:35 PM: Started restoring cached build plugins
11:01:35 PM: Finished restoring cached build plugins
11:01:35 PM: Attempting Ruby version 2.7.2, read from environment
11:01:36 PM: Using Ruby version 2.7.2
11:01:36 PM: Using PHP version 8.0
11:01:36 PM: Started restoring cached corepack dependencies
11:01:36 PM: mv: cannot move ‘/opt/build/cache/.node/corepack’ to ‘/opt/buildhome/.node/corepack’: No such file or directory
11:01:36 PM: Finished restoring cached corepack dependencies
11:01:36 PM: No npm workspaces detected
11:01:36 PM: Started restoring cached node modules
11:01:36 PM: Finished restoring cached node modules
11:01:36 PM: Bypassing sha validation. Running pre & post install scripts
11:01:36 PM: Installing npm packages using npm version 8.19.3
11:01:39 PM: removed 1 package, and audited 1499 packages in 2s
11:01:39 PM: 232 packages are looking for funding
11:01:39 PM: run npm fund for details
11:01:39 PM: 5 high severity vulnerabilities
11:01:39 PM: To address all issues (including breaking changes), run:
11:01:39 PM: npm audit fix --force
11:01:39 PM: Run npm audit for details.
11:01:39 PM: npm packages installed
11:01:39 PM: Started restoring cached go cache
11:01:39 PM: Finished restoring cached go cache
11:01:39 PM: go version go1.19.5 linux/amd64
11:01:40 PM: Detected 0 framework(s)
11:01:40 PM: Installing missing commands
11:01:40 PM: Verify run directory
11:01:40 PM: Section completed: initializing
11:01:41 PM:
11:01:41 PM: Netlify Build
11:01:41 PM: ────────────────────────────────────────────────────────────────
11:01:41 PM:
11:01:41 PM: ❯ Version
11:01:41 PM: @netlify/build 29.5.3
11:01:41 PM:
11:01:41 PM: ❯ Flags
11:01:41 PM: baseRelDir: true
11:01:41 PM: buildId: 63db3592bc73eb0008f6d2f2
11:01:41 PM: deployId: 63db3592bc73eb0008f6d2f4
11:01:41 PM:
11:01:41 PM: ❯ Current directory
11:01:41 PM: /opt/build/repo
11:01:41 PM:
11:01:41 PM: ❯ Config file
11:01:41 PM: No config file was defined: using default values.
11:01:41 PM:
11:01:41 PM: ❯ Context
11:01:41 PM: production
11:01:41 PM:
11:01:41 PM: 1. Build command from Netlify app
11:01:41 PM: ────────────────────────────────────────────────────────────────
11:01:41 PM:
11:01:41 PM: $ CI= npm run build
11:01:41 PM: > my-app@0.1.0 build
11:01:41 PM: > node scripts/build.js
11:01:42 PM: Creating an optimized production build…
11:01:49 PM: Compiled with warnings.
11:01:49 PM:
11:01:49 PM: [eslint]
11:01:49 PM: src/App.js
11:01:49 PM: Line 11:9: ‘isPreviewingInBuilder’ is assigned a value but never used no-unused-vars
11:01:49 PM: Line 12:10: ‘notFound’ is assigned a value but never used no-unused-vars
11:01:49 PM: Line 28:6: React Hook useEffect has an unnecessary dependency: ‘window.location.pathname’. Either exclude it or remove the dependency array. Outer scope values like ‘window.location.pathname’ aren’t valid dependencies because mutating them doesn’t re-render the component react-hooks/exhaustive-deps
11:01:49 PM: Search for the keywords to learn more about each warning.
11:01:49 PM: To ignore, add // eslint-disable-next-line to the line before.
11:01:49 PM: File sizes after gzip:
11:01:49 PM: 99.18 kB build/static/js/main.100fb583.js
11:01:49 PM: Starting post processing
11:01:49 PM: 1.78 kB build/static/js/787.28cb0dcd.chunk.js
11:01:49 PM: 264 B build/static/css/main.e6c13ad2.css
11:01:49 PM: The project was built assuming it is hosted at /.
11:01:50 PM: Post processing - HTML
11:01:49 PM: You can control this with the homepage field in your package.json.
11:01:49 PM: The build folder is ready to be deployed.
11:01:49 PM: You may serve it with a static server:
11:01:50 PM: Post processing - header rules
11:01:49 PM: npm install -g serve
11:01:49 PM: serve -s build
11:01:49 PM: Find out more about deployment here:
11:01:50 PM: Post processing - redirect rules
11:01:49 PM: Deployment | Create React App
11:01:49 PM:
11:01:49 PM: (build.command completed in 7.9s)
11:01:50 PM: Post processing done
11:01:49 PM:
11:01:49 PM: 2. Deploy site
11:01:50 PM: Section completed: postprocessing
11:01:49 PM: ────────────────────────────────────────────────────────────────
11:01:49 PM:
11:01:49 PM: Starting to deploy site from ‘build’
11:01:49 PM: Calculating files to upload
11:01:49 PM: 1 new files to upload
11:01:49 PM: 0 new functions to upload
11:01:49 PM: Section completed: deploying
11:01:49 PM: Site deploy was successfully initiated
11:01:49 PM:
11:01:49 PM: (Deploy site completed in 261ms)
11:01:49 PM:
11:01:49 PM: Netlify Build Complete
11:01:49 PM: ────────────────────────────────────────────────────────────────
11:01:49 PM:
11:01:51 PM: Site is live 
11:01:49 PM: (Netlify Build completed in 8.2s)
11:01:50 PM: Caching artifacts
11:01:50 PM: Started saving node modules
11:01:50 PM: Finished saving node modules
11:01:50 PM: Started saving build plugins
11:01:50 PM: Finished saving build plugins
11:01:50 PM: Started saving pip cache
11:01:50 PM: Finished saving pip cache
11:01:50 PM: Started saving emacs cask dependencies
11:01:50 PM: Finished saving emacs cask dependencies
11:01:50 PM: Started saving maven dependencies
11:01:50 PM: Finished saving maven dependencies
11:01:50 PM: Started saving boot dependencies
11:01:50 PM: Finished saving boot dependencies
11:01:50 PM: Started saving rust rustup cache
11:01:50 PM: Finished saving rust rustup cache
11:01:50 PM: Started saving go dependencies
11:01:50 PM: Finished saving go dependencies
11:01:50 PM: Build script success
11:01:50 PM: Section completed: building
11:01:50 PM: Uploading Cache of size 106.0MB
11:01:51 PM: Section completed: cleanup
11:01:51 PM: Finished processing build request in 27.156s
Builder content link
Builder public api key
b099763e816e428da045d2220629aa51
What are you trying to accomplish
Successful Compiling & Deploying
Code stack you are integrating Builder with
React.Js
Reproducible code example
From App.js
import { useEffect, useState } from “react”;
import { BuilderComponent, builder, useIsPreviewing } from “@builder.io/react”;
// Put your API key here
builder.init(‘b099763e816e428da045d2220629aa51’);
// set whether you’re using the Visual Editor,
// whether there are changes,
// and render the content if found
export default function CatchAllRoute() {
const isPreviewingInBuilder = useIsPreviewing();
const [notFound, setNotFound] = useState(false);
const [content, setContent] = useState(null);
// get the page content from Builder
useEffect(() => {
async function fetchContent() {
const content = await builder
.get(“page”, {
url: window.location.pathname
})
.promise();
setContent(content);
setNotFound(!content);
}
fetchContent();
}, [window.location.pathname]);
// return the page when found
return (
<>
{content?.data.title}
{/* Render the Builder page */}
</>
);
}
From Index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import CatchAllRoute from ‘./App.js’;
import reportWebVitals from ‘./reportWebVitals’;
ReactDOM.render(
<React.StrictMode>
</React.StrictMode>,
document.getElementById(‘root’)
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: Measuring Performance | Create React App
reportWebVitals();