diff options
-rw-r--r-- | templates/react/README.md | 33 | ||||
-rw-r--r-- | templates/react/build.ts | 6 | ||||
-rw-r--r-- | templates/react/dev.tsx | 15 | ||||
-rw-r--r-- | templates/react/package.json | 1 |
4 files changed, 18 insertions, 37 deletions
diff --git a/templates/react/README.md b/templates/react/README.md index f88b8fe66..69d45bca2 100644 --- a/templates/react/README.md +++ b/templates/react/README.md @@ -1,32 +1,25 @@ -# React with Bun runtime +# React Bun App -This is a React project bootstrapped with [bun](https://bun.sh/). - -## Getting Started - -### Cloning the repo +This is a single-page application project template using React and [Bun](https://bun.sh/). Run the following commands to get started. ```sh bun create react ./react-bun-app +cd react-bun-app ``` -### Development +The `bun create` command will automatically install the required dependencies. To start the dev server: -First, run the development server. - -``` -bun dev +```sh +bun run dev ``` -Open http://localhost:3000 with your browser to see the result. - -You can start editing the page by modifying src/App.jsx. The page auto-updates as you edit the file. - -## Learn More +Then open http://localhost:3000 with your browser to see the result. -To learn more about React.js, take a look at the following resources: +This bundles `src/index.tsx` and starts a development server that serves from the `public` and `build` directories. When the incoming request to `localhost:3000/` comes in, the following exchange occurs: -- [React.js Documentation](https://reactjs.org/docs/getting-started.html) - learn about React.js features. -- [Learn React.js](https://reactjs.org/tutorial/tutorial.html) - an interactive React.js tutorial. +- The Bun server returns `public/index.html`. +- The browser renders this HTML, which contains a `script` tags with `src="/index.js"`. The browser requests this file. +- The server checks for this file, first in `public` (no match) then in `build`. It finds `build/index.js` and returns it to the browser. +- This file renders the React component in `src/App.tsx` inside the `div#root` element. The app is now ready to accept user input. -You can check out the [React.js GitHub repository](https://github.com/facebook/react) - your feedback and contributions are welcome! +Start building your app by editing `src/App.tsx`. diff --git a/templates/react/build.ts b/templates/react/build.ts deleted file mode 100644 index a2fa6fcf9..000000000 --- a/templates/react/build.ts +++ /dev/null @@ -1,6 +0,0 @@ -// NODE_ENV=development bun build ./src/index.jsx --outfile ./.build/bundle.js - -Bun.build({ - entrypoints: ["./src/index.tsx"], - outdir: "./build", -}); diff --git a/templates/react/dev.tsx b/templates/react/dev.tsx index d056409e8..d5713adff 100644 --- a/templates/react/dev.tsx +++ b/templates/react/dev.tsx @@ -6,6 +6,11 @@ const PROJECT_ROOT = import.meta.dir; const PUBLIC_DIR = path.resolve(PROJECT_ROOT, "public"); const BUILD_DIR = path.resolve(PROJECT_ROOT, "build"); +await Bun.build({ + entrypoints: ["./src/index.tsx"], + outdir: "./build", +}); + function serveFromDir(config: { directory: string; path: string }): Response | null { let basePath = path.join(config.directory, config.path); const suffixes = ["", ".html", "index.html"]; @@ -36,16 +41,6 @@ export default { // check /.build const buildResponse = serveFromDir({ directory: BUILD_DIR, path: reqPath }); if (buildResponse) return buildResponse; - // const publicFilePath = path.join(PUBLIC_DIR, reqPath); - // if (existsSync(publicFilePath)) { - // return new Response(Bun.file(publicFilePath)); - // } - - // // serve build files - // const buildFilePath = path.join(BUILD_DIR, reqPath); - // if (existsSync(buildFilePath)) { - // return new Response(Bun.file(buildFilePath)); - // } return new Response("File not found", { status: 404, diff --git a/templates/react/package.json b/templates/react/package.json index 84ebd7f96..fbbc7e30b 100644 --- a/templates/react/package.json +++ b/templates/react/package.json @@ -18,7 +18,6 @@ "typescript": "latest" }, "scripts": { - "predev": "NODE_ENV=development bun build ./src/index.jsx --outfile ./.build/bundle.js", "dev": "bun run dev.tsx" }, "bun-create": { |