I'm struggling with how to properly set up my project, specifically the folder structure and the configurations in my package.json and tsconfig files. It feels like every time I tackle one error, another one pops up. I'm working with vanilla TypeScript, Vite, Tailwind, Node Express, and EJS. My understanding is that I need to compile both the client and server since browsers and Node.js can only read JavaScript.
In my package.json, I have different scripts set up for development and production, but I faced issues creating a dist folder when I had 'noEmit' and 'emitDeclarationOnly' set to true. After fixing that, I encountered an error stating, "Named export 'SupabaseClient' not found" from the '@supabase/supabase-js' package, even though my package.json specifies "type": "module". I'm confused about why I'm getting a CommonJS error when everything seems correctly configured.
Also, I don't quite grasp the difference between development and production builds. In development mode, the code automatically updates upon saving, but is that the same as in production? I want to understand the whole ecosystem better to avoid constant issues; I feel like the JS environment evolves so quickly that online videos are often outdated. I prefer to understand the concepts deeply instead of just following step-by-step instructions.
Here's a quick look at my folder structure: 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
Creating a boilerplate with Vite is a great way to minimize setup headaches. It streamlines a lot of processes for you. Just set it up once, and you'll have a solid foundation for your development work. If you encounter new errors later, refer back to that initial setup—it can be a lifesaver!
Regarding where to read up on the JavaScript ecosystem, I totally get what you mean! The official docs are definitely your best bet - they are more reliable than most tutorial videos since they are frequently updated. For Node.js, TypeScript, and Vite, I suggest diving deep into their respective documentation. Understanding concepts like package.json is crucial since it not only outlines your project but also manages dependencies through npm.
It seems like you’re looking to grasp the concepts more deeply, which is awesome! Think of package.json as the map for your project; it tells npm how to manage your dependencies. It's key for defining your library or app's structure. You’ll also want to familiarize yourself with ES modules and how to integrate them properly into your projects. If you're ever confused about bindings, look for .d.ts files that help TypeScript understand external JS libraries. That's where a lot of community support can come in handy too!
You’ve asked a key question about dev versus build modes! In development, any changes you make are reflected immediately because Vite runs a local server that serves the code directly from memory. This is great for quick feedback while coding. Conversely, in build mode, your code is compiled and saved to disk for deployment. It’s important to know the difference because one is about real-time development and the other is for when you're ready to ship your app!
Thanks! Looking forward to creating that boilerplate; sounds like it will save me a lot of time.