Facilitated by James Lanzon
This document outlines all setup requirements for participants attending the PTL Workshop 2025 – Vue & React Comparison, facilitated by James Lanzon. It ensures each participant is fully prepared to run both frameworks locally, follow along during hands-on exercises, and optionally deploy to Netlify (Vue) and Vercel (React).
| Tool | Minimum Version | Description |
|---|---|---|
| Node.js | ≥ 20.19.0 | Required runtime for both Vue and React apps |
| pnpm | ≥ 9.x | Efficient package manager for monorepo setup |
| Git | Any modern version | Source control & branching for workshop checkpoints |
| VS Code | Latest | Recommended IDE with plugin support |
| Browser | Chrome, Edge, or Firefox | Used for app testing and dev tools inspection |
✅ Verify installation:
node -v pnpm -v git --version
- Clone the workshop repository:
git clone https://github.com/Koshux/vue-vs-react.git
cd vue-vs-react- Install dependencies:
pnpm install- Start each app locally:
# Vue app
cd packages/vue-app
pnpm dev
# React app (after creation)
cd packages/react-app
pnpm dev- Build for production:
pnpm buildFor the best development experience, install the following VS Code extensions:
| Extension | ID | Description |
|---|---|---|
| Vue – Official | Vue.volar |
Language support and IntelliSense for Vue 3 |
| ESLint | dbaeumer.vscode-eslint |
Enforces consistent linting and style rules |
| Prettier | esbenp.prettier-vscode |
Auto-formats code on save |
| TypeScript Vue Plugin | (included with Volar) | Adds full TypeScript awareness in .vue files |
| Tailwind CSS IntelliSense | bradlc.vscode-tailwindcss |
Autocompletion and design-token hints for Tailwind CSS |
| Extension | Purpose |
|---|---|
| GitLens | Enhanced Git history, blame, and commit insights |
| REST Client | Test APIs directly from .http files |
| Playwright Test for VS Code | Run and debug E2E tests interactively |
If installing dependencies locally isn’t possible, you can use a cloud-based dev environment:
- Pre-configured Node.js + PNPM setup
- Runs VS Code directly in the browser
- Access via your GitHub account under your forked repo
- Visit stackblitz.com
- Import repository via GitHub URL
- Supports both Vue and React with hot-reload out of the box
Both options support Node 20 + and require minimal local configuration.
- Go to Netlify.
- Click “New Site from Git.”
- Connect your GitHub repository.
- Select the vue-app directory as your root.
- Configure the build settings:
Build command: pnpm build
Publish directory: dist- Click Deploy Site.
✅ Example Deployment: https://ptl-workshop-vue.netlify.app
- Go to Vercel.
- Click “Add New Project.”
- Import your GitHub repository.
- Select the react-app directory.
- Configure the build settings:
Framework Preset: Vite
Build Command: pnpm build
Output Directory: dist- Click Deploy, and Vercel will automatically assign a live preview URL.
💡 Tip: You can link your custom domain in Vercel after deployment.
| Framework | Unit Testing | E2E Testing |
|---|---|---|
| Vue | Vitest + Vue Test Utils | Playwright |
| React | Jest + React Testing Library | Cypress or Playwright |
pnpm test:unit # Unit tests
pnpm test:e2e # End-to-end tests- Clear PNPM cache:
pnpm store prune
- Restart VS Code after installing new extensions.
- Ensure Node is not using outdated global versions.
- Run pnpm dev --force if hot reload fails.
- On Windows, if Vite build errors occur:
rm -rf node_modules pnpm-lock.yaml
pnpm install| Status | Item |
|---|---|
| ☐ | Node.js 20+ installed |
| ☐ | PNPM installed |
| ☐ | Git & VS Code installed |
| ☐ | Repository cloned successfully |
| ☐ | Dev server runs for both Vue & React |
| ☐ | Netlify & Vercel accounts created |
| ☐ | Recommended extensions installed |
| ☐ | Tests pass locally (pnpm test:unit) |
Facilitator: James Lanzon 📧 lanzonprojects@gmail.com 💻 github.com/Koshux
© 2025 Slow Burn Ltd. All rights reserved.