I have tried many variations of the build settings, but they have all failed. I have tried setting my base directory to nothing, /ToDo, and /ToDo/ToDo. I have tried the same for my publish directory but also with /build at the end and currently have it as just build. It does not think my package.json file exists even though it it in the /ToDo folder clearly. Any idea why this would be the case?
Hi @adamprinciotta, kindly follow the steps below to resolve your problem.
First of all change your base directory by clicking on your site’s name in the Netlify dashboard UI → Then click on the Site settings button → Then click on the Build & deploy link in the left pane menu → Then click on the Edit settings button by scrolling down to the Build settings section → Then type ToDo in the Base directory input field. → Click on the Save button to complete.
ToDo is a sub-directory in the root of your project hence the reason for setting ToDo as the base directory in the deploy settings.
Once you are done setting the base directory by following the suggestions above, kindly add the environment variables by following the steps below.
Go to your project in Netlify and click on your site name.
Click on the Site settings button or tab on the right most side of the menu.
Click on Environment variables (New) on the left pane menu.
Click on the Add Variable button.
Type CI into the key input field, and then type false into the values field, and then click on the Create variable button.
Repeat the steps from step 4 to add another Environment variable by setting the key input to NPM_FLAGS and set values input to --legacy-peer-deps.
Once you are done click on the Deploys tab menu at the top of the page and then click on the Trigger deploy button and select Clear cache and deploy site option.
Thank you, that allowed it to run. However, instead or running my app.jsx, just displays the index.html. I tried changing the build command to npm run build since I used vite to set it up, but that also just runs the index.html file. Do you know if I can just alter the index.html file to call these other files or if there is a better command for having it run?
Hi @adamprinciotta, thanks for letting me know my suggestion helped.
Regarding your question, the way react works is different from regular HTML websites.
React is a single page application therefore App.jsx is the root component. When React is building your site, conceptually the root component is injected into the index.html and then rendered.
Also any child component within the root component (App.jsx) will be injected into the index.html and then rendered as well.
Since your website is a one page website, you designed it in a way that when the menu links are clicked you will be navigated to a section of the page.
However I am assuming you also want routing to different pages instead of scrolling to a section on the main page.
At the end of the day it is still a single page application that just gives you the illusion that you have navigated to a new page when a menu link is clicked. What happens is that the child component is just swapped with another child component.
You can build routing yourself however there are easier alternatives such as using packages so that you don’t reinvent the wheel.
If you want to implement page routing in React you can use packages such as React Router.
Learn more about React Router at
You can also read more about how React Router works at
I designed the project to be a single page web application, just multiple components handling different sections/functions of the page. I believe all of this stems from my app.jsx. I may be misunderstanding, but it sounds like you’re saying the app.jsx is injected into the index.html then run? If that’s the case it doesn’t seem to be working. It’s just odd that on my local host, it works just fine. But when it’s run here it just does the index.js and not the app.jsx
@adamprinciotta In general, there’s nothing particularly odd about builds “working locally” and not when deployed.
The is because most site builders do something entirely different when they’re performing a “build” than when they run their development server.
So it’s rarely an “apples & apples” comparison.
With a standard static site (not relying on functions), a much closer comparison is to run your npm run build command locally, then go into the appropriate output folder and run npx serve.
You should see the same behaviour there that you do on Netlify.
Checking your repository myself, I see a Sign in with Google button after a build, is that not what should be showing?
I do not see any index.js in your repository.
The only file that I am assuming might be the index is main.jsx. Correct me if I am wrong.
In the main.jsx your code is injecting the App.tsx into the index.html
Now when you take a look inside App.tsx you notice the components that might render is the SignOut and GrabData in div or a SignIn component due to conditional rendering.
Sign in with Google is the first component that will be rendered.
The above is exactly what should happen after it has been deployed as well.
Once you are signed in with Google, a session is stored so anytime you revisit the site the SignOut and GradData components will be rendered.
Once you sign out only the SignIn component with be rendered.
If the above explanation does not make things clear, I recommend you go through your code from the App.tsx file and then investigate the children components that get rendered to understand the sequence of components that get rendered.
Else kindly explain what exactly you want to achieve.
I apologize, I meant to say that it renders the index.html which is essentially blank rather than the App.jsx. The App.jsx is run through the main.jsx so I guess neither of them is being run. I do want it so that they have to sign in before using it and that components are run conditionally. I am still need to make the sign in page look better, but right now it doesn’t load for me at all. Do you see the sign in with google button on the page?
Hi @adamprinciotta, you are not doing anything wrong. I am suggesting you create a fresh deploy to see if the problem persists. You can add another copy of the site and still keep the current deploy.
Thanks.
I added a new site with the same repo, did the environment variables the way they should be, and it still loads a blank page. Just to clarify, the build command you did was npm run build?
