I'm really struggling to wrap my head around how to set up my project folder structure and understand the options in the package.json and tsconfig.json files. It feels like every time I fix one error, another one appears. I'm using vanilla TypeScript with Vite, Tailwind, and Node.js Express. I know that I need to `tsc` both the client and server since browsers and Node can only read JavaScript, but I'm not sure about my setup.
Here's my package.json file:
"scripts": {
// For development
"watch:ts": "tsc -w", // Transpile server files to server/dist
"dev:server": "nodemon server/dist/app.js", // Start server on port 3000
"dev:client": "vite", // Compiles TypeScript and Tailwind
"dev": "concurrently "watch:ts" "npm run dev:server" "npm run dev:client"",
// For production
"build:ts": "tsc",
"build:client": "vite build",
"build": "npm run build:ts && npm run build:client",
"preview": "vite preview"
},
I had issues outputting a dist folder because I mistakenly set "noEmit": true and "emitDeclarationOnly": true in my tsconfig.json. Once I corrected that, I ran into another error: `Named export 'SupabaseClient' not found. The requested module '@supabase/supabase-js' is a CommonJS module, which may not support all module.exports as named exports.` I've set "type": "module" in my package.json and "module": "ESNext" in my tsconfig, so I'm confused why I'm still seeing this error.
Also, I don't fully understand the difference between 'dev' and 'build'. In 'dev', my code updates automatically when I save, but I thought 'build' did the same when I prepare for deployment.
Where can I find resources that explain the overall ecosystem? I feel like the JavaScript environment changes so fast, making YouTube tutorials often outdated. I want to grasp the concepts instead of just following instructions since I might be using different technologies than those in the videos.
I'd like to compare my understanding to cooking – I want to learn the chemistry behind the ingredients, not just follow a recipe blindly! Here's how my folder looks:
my-project/
├── package.json
├── tsconfig.json
├── vite.config.ts
├── server/
│ ├── dist/
│ ├── index.ts
│ ├── views/
│ ├── routes/
│ ├── controllers/
│ └── database/
└── client/
├── index.html
└── src/
├── main.ts
├── DOMfunctions.ts
└── supabaseClient.ts
4 Answers
The difference between `dev` and `build` is crucial to know. In `dev` mode, your transformed code is served from memory via a local server, so it's fast and changes happen instantly as you edit your files. Conversely, in `build` mode, that transformed code is written to disk for deployment, making it ready for production use.
For learning resources, I'd stick to the official documentation for Node.js, TypeScript, and Vite. They often contain the most up-to-date information! You're right; many YouTube videos can become outdated quickly, so the docs are more reliable. Also consider practice projects to really get a handle on the environment!
Great analogy with the cooking! Just like understanding flavors is essential in cooking, grasping how these technologies interconnect is vital in programming. Your `package.json` is central to Node.js projects, defining dependencies and scripts. You might explore how typologies like CommonJS and ES Modules differ—understanding the historical context really helps make the concepts clearer. I’d recommend going through the npm documentation too for deeper insights.
You're doing great, and it’s normal to run into these hiccups while you're learning. One tip is to start with boilerplate templates for your setup, especially using Vite since it can save you a lot of initial configuration headaches. They will handle a lot of the complex stuff for you. Once you're comfortable, you can always dive deeper into the configurations you want to customize.
It sounds like you're facing a pretty common setup issue, but you've got most things sorted out already! First off, you're correct that the browser needs JavaScript while you're using TypeScript. However, since you're using Vite, it automatically handles TypeScript for you without needing `tsc` for the client side. Thus, `"noEmit": true` is a good setting in your client tsconfig.json.
For the server, you'll definitely want to transpile with `tsc` unless your Node.js version supports running TypeScript directly. Just keep an eye out for which version your hosting provider uses.
Regarding the `SupabaseClient` error, it seems like you're importing something from a CommonJS module when your project is set to use ES modules. You should switch to using default imports instead of named imports for that package. The error isn't in your code; the package structure is the issue. Check out MDN for clarity on named imports if you need it!
Understood! I'll separate my client and server configurations in their own tsconfig files next time to avoid confusion.
Exactly! I’m already looking into some boilerplate examples to make this setup smoother.