{"id":27699912,"url":"https://github.com/golaughlin/deno-react-vite-ts","last_synced_at":"2025-09-05T22:42:04.938Z","repository":{"id":265185402,"uuid":"895347381","full_name":"golaughlin/deno-react-vite-ts","owner":"golaughlin","description":"The code for the \"Build a React app with a starter template\" tutorial in the Deno Docs.","archived":false,"fork":false,"pushed_at":"2024-11-28T05:44:57.000Z","size":41,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-25T14:04:44.629Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/golaughlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-28T03:20:36.000Z","updated_at":"2024-11-28T05:45:00.000Z","dependencies_parsed_at":"2024-11-28T06:38:08.287Z","dependency_job_id":null,"html_url":"https://github.com/golaughlin/deno-react-vite-ts","commit_stats":null,"previous_names":["golaughlin/deno-react-vite-ts"],"tags_count":0,"template":false,"template_full_name":"denoland/react-vite-ts-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/golaughlin%2Fdeno-react-vite-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/golaughlin%2Fdeno-react-vite-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/golaughlin%2Fdeno-react-vite-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/golaughlin%2Fdeno-react-vite-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/golaughlin","download_url":"https://codeload.github.com/golaughlin/deno-react-vite-ts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250862727,"owners_count":21499341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-25T17:35:25.733Z","updated_at":"2025-04-25T17:35:26.442Z","avatar_url":"https://github.com/golaughlin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Template with Vite and Deno\n\nThis is a GitHub template project to set up a [React](https://react.dev/) app\nwith TypeScript running on [Deno](https://deno.com). It uses\n[Vite](https://vite.dev) as the dev server and an [oak](https://jsr.io/@oak/oak)\nhttp server on the backend to serve the built project.\n\n## Features\n\n- React with TypeScript on the frontend\n- Vite for the development server\n- Deno for server-side JavaScript/TypeScript\n- Oak framework for building web applications\n- Static file serving\n- Router setup\n\n## Getting Started\n\n### Prerequisites\n\nTo run this app, you will need to have [Deno](https://docs.deno.com/runtime/)\ninstalled.\n\n### Installation\n\n1. Create a new repository using this template. From the repository page, click\n   the \"Use this template\" button in the top right hand of the page:\n\n\u003cimg src=\"https://docs.github.com/assets/cb-76823/images/help/repository/use-this-template-button.png\" alt=\"Use this template button\" width=\"400\"\u003e\n\n2. Use the Owner dropdown menu to select the account you want to own the\n   repository and set the repository name and visibility.\n\n3. Clone the repository created to your local machine.\n\n```sh\ngit clone https://github.com/your-username/your-repo-name.git\ncd your-repo-name\n```\n\n\u003e For a step by step guide to using a GitHub template\n\u003e [follow this walkthrough](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template)\n\n## Install the dependencies\n\nTo install the dependencies for the frontend and backend, run the following\ncommand:\n\n```sh\ndeno install\n```\n\n## Run the dev server with vite\n\nThe app uses a Vite dev server to run in development mode. To start the dev\nserver, run the following command:\n\n```sh\ndeno run dev\n```\n\n## Build the app\n\nTo build the app for production, run the following command:\n\n```sh\ndeno run build\n```\n\n## Run the backend server\n\nThe backend server uses Deno and the Oak framework to serve the built React app.\nTo start the backend server, run the following command:\n\n```sh\ndeno run serve\n```\n\n## Running Tests\n\nTo run the tests, use the following command:\n\n```sh\ndeno test -A\n```\n\n## Project Structure\n\n```sh\n. \n├── client \n│   ├── dist \n│   ├── public \n│   └── src \n│       ├── App.tsx \n│       └── main.tsx \n└── server \n    ├── main.ts \n    ├── main_test.ts \n    └── util \n        └── routeStaticFilesFrom.ts\n```\n\n- `App.tsx`: The main React component\n- `main.tsx`: The entry point for the React app\n- `main.ts`: The entry point for the Deno server\n- `main_test.ts`: The test file for the Deno server\n- `routeStaticFilesFrom.ts`: A utility function to serve static files\n- `dist`: The output directory for the built React app\n- `public`: The public directory for the React app\n\n## Points of note\n\nThe React app is contained in the `client` directory. This is also where Vite\nwill install its dependencies and build the app.\n\nThere is a `vite.config.ts` file in the root of the project that configures Vite\nto build the app in the `client/dist` directory and serve the app on port 3000.\n\nThe `deno.json` file contains the tasks to run the dev server, build the app,\nand serve the app, along with the dependencies and the compiler configuration\nrequired to use JSX and React.\n\nThe Deno server is contained in the `server` directory. The server serves the\nbuilt React app from the `client/dist` directory and listens on port 8000. This\nis what should be used in production.\n\n## Deploying\n\nYou can deploy the app with [Deno Deploy](https://dash.deno.com/new_project).\n\n1. Link your github account\n2. Select the repository\n3. Give the project a name\n4. Set the \"Build Step\" to `deno task build`\n5. Set the entry point to `./server/main.ts`\n6. Click 'deploy project'\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgolaughlin%2Fdeno-react-vite-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgolaughlin%2Fdeno-react-vite-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgolaughlin%2Fdeno-react-vite-ts/lists"}