Frontend rect feature #10
Conversation
…ated by Vite into that section
aak523
left a comment
aak523
left a comment
There was a problem hiding this comment.
Good so far. Just need to address my comments, mostly around fleshing out explanations of non-basic terms, have more of a think about examples, and add some screenshots / other media.
.idea/.gitignore
Outdated
There was a problem hiding this comment.
Do we need .idea files in the actual example repository?
There was a problem hiding this comment.
oopsy :) will remove
|
|
||
| [TypeScript docs](https://www.typescriptlang.org/). | ||
|
|
||
| ### Repo structure (recommended) |
There was a problem hiding this comment.
Does the generic frontend/backend separation repo structure really need to be in this HackPack? That's more of a general project planning topic.
Could rework this to be more React-specific.
|
|
||
| ### Create a React app with Vite (recommended) | ||
|
|
||
| [**Vite**](https://vitejs.dev/) is a modern development server + build tool. It’s fast because it uses native ES modules in development and bundles for production. |
There was a problem hiding this comment.
What are 'native ES modules'? Most hackers won't know what this means.
|
|
||
| **`package.json`** is an important file that you'll come across. It contains your project metadata, scripts, and dependencies. | ||
|
|
||
| You might also see some **example scripts**: `dev`, `build` & `preview`. |
There was a problem hiding this comment.
I was a bit confused by these being in the "files created" section since they're commands to be run, not files, right? Since you talk about them later in the deployment section anyway I think it might just be better to remove this.
There was a problem hiding this comment.
My thought process was that newcomers get overwhelmed when they start a project and see lots of huge files generated for them automatically. They might think they don't need some of them , or start touching things that are not really needed to be touched.
The files that I mentioned here are the files that generated in a basic startup version of React project basically, and would serve as a helper in case a project is not getting compiled and they start looking for the root of the problem.
There was a problem hiding this comment.
Wait, sorry, if it wasn't specifically clear, then I was referring to the example scripts (since they aren't really files, and you mention them later).
|
|
||
| Your React app will still be running in the browser, but now it’s bundled and optimised for production. | ||
|
|
||
| ### **Express** *example*: Serve the built frontend from a Node backend |
There was a problem hiding this comment.
This example might work better with one of the backend technologies that we're actually using in HackPacks (e.g. FastAPI).
Let me know if you want some more guidance on this, having this section is great though.
|
|
||
| - Deploy the frontend for your application separately (simplest) and call your backend via **HTTP**. | ||
| - *Example backends*: Vercel, Netlify, Cloudflare Pages, GitHub Pages. | ||
| - Or **host your static assets** from `dist/` on any static server (NGINX, S3, etc.). |
There was a problem hiding this comment.
HackPack ends a bit abruptly.
Might be good to summarise key takeaways of the HackPack and resources for 'what comes next'.
| App.tsx | ||
| ~~~ | ||
|
|
||
| ### *Example*: Page using a `Counter maxValue={...}` |
will probably add something else but so far this