React Template with Vite and Deno

This is a GitHub template project to set up a React app with TypeScript running on Deno. It uses Vite as the dev server and an oak http server on the backend to serve the built project.

Features

• React with TypeScript on the frontend
• Vite for the development server
• Deno for server-side JavaScript/TypeScript
• Oak framework for building web applications
• Static file serving
• Router setup

Getting Started

Prerequisites

To run this app, you will need to have Deno installed.

Installation

1. Create a new repository using this template. From the repository page, click the "Use this template" button in the top right hand of the page:

2. Use the Owner dropdown menu to select the account you want to own the repository and set the repository name and visibility.

3. Clone the repository created to your local machine.

git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name

For a step by step guide to using a GitHub template follow this walkthrough

Install the dependencies

To install the dependencies for the frontend and backend, run the following command:

deno install

Run the dev server with vite

The app uses a Vite dev server to run in development mode. To start the dev server, run the following command:

deno run dev

Build the app

To build the app for production, run the following command:

deno run build

Run the backend server

The backend server uses Deno and the Oak framework to serve the built React app. To start the backend server, run the following command:

deno run serve

Running Tests

To run the tests, use the following command:

deno test -A

Project Structure

. 
├── client 
│   ├── dist 
│   ├── public 
│   └── src 
│       ├── App.tsx 
│       └── main.tsx 
└── server 
    ├── main.ts 
    ├── main_test.ts 
    └── util 
        └── routeStaticFilesFrom.ts

• App.tsx: The main React component
• main.tsx: The entry point for the React app
• main.ts: The entry point for the Deno server
• main_test.ts: The test file for the Deno server
• routeStaticFilesFrom.ts: A utility function to serve static files
• dist: The output directory for the built React app
• public: The public directory for the React app

Points of note

The React app is contained in the client directory. This is also where Vite will install its dependencies and build the app.

There is a vite.config.ts file in the root of the project that configures Vite to build the app in the client/dist directory and serve the app on port 3000.

The deno.json file contains the tasks to run the dev server, build the app, and serve the app, along with the dependencies and the compiler configuration required to use JSX and React.

The Deno server is contained in the server directory. The server serves the built React app from the client/dist directory and listens on port 8000. This is what should be used in production.

Deploying

You can deploy the app with Deno Deploy.

1. Link your github account
2. Select the repository
3. Give the project a name
4. Set the "Build Step" to deno task build
5. Set the entry point to ./server/main.ts
6. Click 'deploy project'

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

This project is licensed under the MIT License.