gilamran / Fullstack Typescript
FAST FullStack React with TypeScript starter kit.
Stars: β 295
Programming Languages
typescript
32286 projects
es6
455 projects
Projects that are alternatives of or similar to Fullstack Typescript
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: β 141 (-52.2%)
Mutual labels: webpack, starter-kit, react-router
Preact Minimal
π Minimal preact structure
Stars: β 136 (-53.9%)
Mutual labels: webpack, starter-kit, minimal
React Redux Auth0 Kit
Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Stars: β 115 (-61.02%)
Mutual labels: webpack, minimal, react-router
React Redux Styled Hot Universal
react boilerplate used best practices and focus on performance
Stars: β 147 (-50.17%)
Mutual labels: webpack, starter-kit, react-router
Starter Pack
Combines React (ft. hooks), Redux, Redux-saga and TypeScript with Auth0 as a starting point for modern web apps with solid authentication
Stars: β 209 (-29.15%)
Mutual labels: webpack, starter-kit
Js Library Boilerplate
Javascript Starter Boilerplate - Webpack 4, Babel 7, UMD, Hot Reloading, and more
Stars: β 202 (-31.53%)
Mutual labels: webpack, starter-kit
Ice
π The Progressive App Framework Based On ReactοΌεΊδΊ React ηζΈθΏεΌεΊη¨ζ‘ζΆοΌ
Stars: β 16,961 (+5649.49%)
Mutual labels: webpack, react-router
React
Extremely simple boilerplate, easiest you can find, for React application including all the necessary tools: Flow | React 16 | redux | babel 6 | webpack 3 | css-modules | jest | enzyme | express + optional: sass/scss
Stars: β 244 (-17.29%)
Mutual labels: webpack, react-router
Bedrock
Build a Node web app with user authentication, security, and more in under 10 minutes. Now supports React Hot Loading for super-fast development. π
Stars: β 187 (-36.61%)
Mutual labels: webpack, starter-kit
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: β 229 (-22.37%)
Mutual labels: webpack, starter-kit
Minimal React Starter
As minimal a react starter as you can get... while also using ES6/Babel and Webpack.
Stars: β 246 (-16.61%)
Mutual labels: webpack, minimal
Koa Web Kit
πA Modern, Production-Ready, and Full-Stack Node Web Framework with React
Stars: β 199 (-32.54%)
Mutual labels: webpack, starter-kit
Webpack Nano
A teensy, squeaky π€ clean Webpack CLI
Stars: β 199 (-32.54%)
Mutual labels: webpack, minimal
React Course
Code for ui.dev's "React" course
Stars: β 2,457 (+732.88%)
Mutual labels: webpack, react-router
Styled React Boilerplate
Minimal & Modern boilerplate for building apps with React & styled-components
Stars: β 198 (-32.88%)
Mutual labels: webpack, minimal
Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: β 228 (-22.71%)
Mutual labels: webpack, starter-kit
coconat
π₯ StarterKit Builder for rocket-speed App creation on π React 17 + π Redux 4 + π Router 5 + πͺ Webpack 5 + π³ Babel 7 + π TypeScript 4 + π Linters 23 + π₯ HMR 3
Stars: β 95 (-67.8%)
Mutual labels: react-router, starter-kit
Reactgo
Your One-Stop solution for a full-stack universal Redux App!
Stars: β 2,784 (+843.73%)
Mutual labels: webpack, react-router
Quickbill
Create unlimited invoices for free.
Stars: β 278 (-5.76%)
Mutual labels: webpack, react-router
FAST FullStack React with TypeScript starter kit.
Quick Start
Just clone this repository into your own project folder. and start working
git clone https://github.com/gilamran/fullstack-typescript.git <MyProjectName>
cd <MyProjectName>
npm install
npm run dev
If you want to detach from this repository into your own repository do this:
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
- The client is bundled using Webpack because it goes to the browser.
- The server is emitted by TypeScript because node now supports es6.
Requirements
-
NodeJs 12.13+
,Chrome 79+
orFireFox 72+
Directory Layout
.
βββ /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
βββ tsconfig-for-webpack-config.json # using TypeScript for the webpack config file
βββ README.md # This file
What's included
- React v16
- React router v4
- Material-ui
- Jest
- Styled Components
- Axios (For Client/Server communication)
Usage
-
npm run dev
- Client and server are in watch mode with source maps, opens http://localhost:3000 -
npm run test
- Runs jest tests -
npm run lint
- Runs es-lint -
npm run build
-dist
folder will include all the needed files, both client (Bundle) and server. -
npm start
- Just runsnode ./dist/server/server.js
-
npm start:prod
- setsNODE_ENV
toproduction
and then runsnode ./dist/server/server.js
. (Bypassing webpack proxy)
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
- Universal (Server side rendering)
- Redux/MobX (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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].