Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gilamran/fullstack-typescript
FAST FullStack React with TypeScript starter kit.
https://github.com/gilamran/fullstack-typescript
es6 fullstack minimal react react-router starter-kit typescript webpack
Last synced: 10 days ago
JSON representation
FAST FullStack React with TypeScript starter kit.
- Host: GitHub
- URL: https://github.com/gilamran/fullstack-typescript
- Owner: gilamran
- Created: 2017-03-28T19:55:36.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T08:05:05.000Z (about 2 months ago)
- Last Synced: 2024-10-16T18:32:16.433Z (23 days ago)
- Topics: es6, fullstack, minimal, react, react-router, starter-kit, typescript, webpack
- Language: TypeScript
- Homepage:
- Size: 2.56 MB
- Stars: 366
- Watchers: 7
- Forks: 56
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FAST FullStack React with TypeScript starter kit.
---
## Quick Start
If you're using Github, you can click on the "Use this template" button to create a new repository based on this starter kit.
## Clean example code
The repo comes with some examples on how to do basic stuff. As this is not really needed in real projects, you can remove them by running:
```
yarn clean-up-example-code
```
## Manual clone
clone this repository into your own project folder. and start working
```bash
git clone https://github.com/gilamran/fullstack-typescript.git
cd
yarn
yarn dev
```
If you want to detach from this repository into your own repository do this:
```bash
git remote remove origin
git remote add origin YOUR_REPO_URL
git push -u origin master
```
## Why
- **Simple** to jump into, **Fast** because it is simple.
- Separate `tsconfig.json` for client and server.
- Client and server can share code (And types). For example: [IUserDTO.d.ts](https://github.com/gilamran/fullstack-typescript/blob/master/src/shared/IUserDTO.d.ts)
- The client is bundled using [Vite](https://github.com/vitejs/vite) because it goes to the browser.
- The server is emitted by [TypeScript](https://github.com/Microsoft/TypeScript) because node now supports es6.
---
## Requirements
- `NodeJs 18.12.+`, `Chrome 79+` or `FireFox 72+`
### Directory Layout
```bash
.
├── /node_modules/ # 3rd-party libraries and utilities
├── /dist/ # All the generated files will go here, and will run from this folder
├── /src/ # The source code of the application
│ ├── /client/ # React app
│ ├── /server/ # Express server app
│ ├── /shared/ # The shared code between the client and the server
├── /assets/ # images, css, jsons etc.
├── .eslintrc # es-lint configuration
├── .prettierec # prettier configuration
├── .gitignore # ignored git files and folders
├── .nvmrc # Force nodejs version
├── .env # (ignored) Can be used to override environment variables
├── index.js # The server's entry point
├── package.json # The list of 3rd party libraries and utilities
├── README.md # This file
```
### What's included
- [React v18](https://facebook.github.io/react/)
- [React router v6](https://github.com/ReactTraining/react-router)
- [Material-ui v5](https://github.com/mui-org/material-ui)
- [emotion](https://emotion.sh/docs/introduction)
- [Axios](https://github.com/mzabriskie/axios) (For Client/Server communication)
### Usage
- `yarn dev` - Client and server are in watch mode with source maps, opens [http://localhost:3000](http://localhost:3000)
- `yarn lint` - Runs es-lint
- `yarn build` - `dist` folder will include all the needed files, both client (Bundle) and server.
- `yarn start` - Just runs `node ./dist/server/server.js`
- `yarn start:prod` - sets `NODE_ENV` to `production` and then runs `node ./dist/server/server.js`. (Bypassing vite)
### Config
All applications require a config mechanism, for example, `SLACK_API_TOKEN`. Things that you don't want in your git history, you want a different environment to have different value (dev/staging/production). This repo uses the file `config.ts` to access all your app variables. And a `.env` file to override variable in dev environment. This file is ignored from git.
---
#### What's not included
- Server side rendering
- Redux/MobX/Zustand (State management)
---
#### Licence
This code is released as is, under MIT licence. Feel free to use it for free for both commercial and private projects. No warranty provided.