Troubleshooting Vite Deployment Issues on Netlify

| tech |

Code stored on GitHub and then deployed on Netlify

| error message |

Failed during stage "Reading and parsing configuration files"

| solution |

In "Build settings" enter the below configuration:
Base directory:
Package directory:
Build command: vite build
Publish directory: dist

Leave the rest as is and deploy.

| context |

One of the things that has become a prerequisite of whether or not I would continue developing an app is my ability to deploy it online. As a not-so-new-newbie to software development, I've run into several issues deploying my apps in the past, resulting in me not being able to share my work with the world. As much as I love coding, if no one can see and interact with my work, it diminishes the purpose of creating apps!

Yes, I love to be dramatic, but wouldn't you agree that it's just as satisfying to share your apps with people? That's why after setting up the basic structure for this app, I tested the deployment right away but had no success.

I tried several different configurations for the deployment but failed, and when I was eventually able to deploy the web app, it loaded as a blank site. I knew it had something to do with Vite and the configurations on Netlify, and after a lot of trial and error, I found the correct config.

Other than reading the error messages on your platform of choice for deployment, try these steps the next time you encounter deployment issues:
1) Open the web inspector on the browser you are using to view the website or web app. Here I used Chrome, my preferred browser, but I also recommend Firefox.
2) Go to the console tab, or just click on the error icons that show up on your web inspector, if any, and it will open the console tab.

3) Google the error message and read the first few search results that come up.

Here is a log of all the failed deployments. To me, all the failed attempts are just part of a journey to the eventual shiny green "Published" status: