Our goal is to develop a Bluetooth Web UI that can talk to a Raspberry Pi IOT device. Typically, the RPI device will not have a user interface of its own, so we need to communicate with it using Bluetooth.
This guide walks you through the complete setup on Windows, including Node.js, React with Vite, GitHub version control, and Vercel deployment. The steps are divided into one‑time system setup and per‑project setup, so you always know what needs to be done once and what repeats for each new project.
A daily development workflow is described in this post.
One‑Time Setup (Do These Once Per Windows Machine)
1. Install Node.js
Download the LTS version of Node.js from the official website and run the installer. This gives you Node.js and npm, which are required for React, Vite, and most modern JavaScript tooling.
2. Install Git for Windows
Install Git so you can create repositories, commit code, and push to GitHub. The default installation settings work well for most users.
3. Install Visual Studio Code
VS Code is the recommended editor for React and JavaScript development. Install helpful extensions such as Prettier, GitLens, and ES7+ React Snippets.
4. Install a Web‑Bluetooth‑Compatible Browser
Use Google Chrome or Microsoft Edge. Firefox and Safari do not support Web Bluetooth.
5. Create a Vercel Account
Go to vercel.com and create an account. You can sign in with GitHub or email. If you sign in with email, you will connect GitHub later.
6. Connect Vercel to GitHub
This step is required for automatic deployments. Visit: https://vercel.com/account/login-connections (vercel.com in Bing) Find GitHub, click Connect, and approve the permissions. Choose either “All repositories” or “Only selected repositories.” Once connected, Vercel can automatically deploy your GitHub projects.
7. Install the Vercel CLI
Install the Vercel command‑line tool by running: npm install -g vercel Then log in using: vercel login This allows you to deploy and link projects directly from your computer.
Per‑Project Setup (Do These for Every New Project)
8. Create a Project Folder
Create a folder where your React projects will live. For example: C:\Users\YourName\react Open PowerShell inside this folder.
9. Create a New React + Vite Project
Run: npm create vite@latest your-project-name — –template react Vite will ask: “Install with npm and start now?” Choosing “Yes” automatically installs dependencies and starts the development server at http://localhost:5173. This is expected and confirms your environment is working.
10. Initialize Git and Push to GitHub
Inside your project folder, run: git init git add . git commit -m “Initial commit”
Add your GitHub repository as the remote: git remote add origin https://github.com/yourusername/your-project (github.com in Bing)
If Git defaulted to “master” instead of “main,” rename it: git branch -M main
Then push: git push -u origin main
Your project is now stored safely on GitHub.
11. Link the Project to Vercel and Deploy
Run: vercel
Choose your team, create a new project, and accept the detected Vite settings. When Vercel asks: “Connect detected Git repository?” Choose “Yes.”
Because you connected GitHub earlier, Vercel will now successfully link the repository and set up automatic deployments. Your project will be deployed to a live URL, and every future git push to the main branch will trigger a new deployment.
Conclusion
With this setup in place, you now have a complete Windows development environment for building a Bluetooth Web UI. You also have GitHub for version control and Vercel for fast, automated deployments. This workflow is clean, repeatable, and ideal for ongoing development across multiple projects.