Home
Softono
k

kriasoft

Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.

Visit Website
Total Products
3

Software by kriasoft

react-starter-kit
Open Source

react-starter-kit

<div align="center"> # React Starter Kit <a href="https://reactstarter.com/getting-started/"><img src="https://img.shields.io/badge/Docs-007ec6" height="20"></a> <a href="https://github.com/kriasoft/react-starter-kit?sponsor=1"><img src="https://img.shields.io/badge/-GitHub-%23555.svg?logo=github-sponsors" height="20"></a> <a href="https://discord.gg/2nKEnKq"><img src="https://img.shields.io/discord/643523529131950086?label=Chat" height="20"></a> <a href="https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant"><img src="https://img.shields.io/badge/Ask_ChatGPT-10a37f?logo=openai&logoColor=white" height="20"></a> <a href="https://gemini.google.com/gem/1IXFElQ2UvvZY86iL6uZLeoC-r8mp-OB-?usp=sharing"><img src="https://img.shields.io/badge/Ask_Gemini-8E75B2?logo=googlegemini&logoColor=white" height="20"></a> <a href="https://github.com/kriasoft/react-starter-kit/stargazers"><img src="https://img.shields.io/github/stars/kriasoft/react-starter-kit.svg?style=social&label=Star&maxAge=3600" height="20"></a> <a href="https://x.com/ReactStarter"><img src="https://img.shields.io/twitter/follow/ReactStarter.svg?style=social&label=Follow&maxAge=3600" height="20"></a> </div> A full-stack monorepo template for building SaaS applications with React 19, tRPC, and Cloudflare Workers. Type-safe from database to UI, deployable to the edge in minutes. ## Highlights - **Type-safe full stack** — TypeScript, tRPC, and Drizzle ORM create a single type contract from database to UI - **Edge-native** — Three Cloudflare Workers (web, app, api) connected via service bindings - **Auth + billing included** — Better Auth with email OTP, passkey, Google OAuth, organizations, and Stripe subscriptions - **Modern React** — React 19, TanStack Router (file-based), TanStack Query, Jotai, Tailwind CSS v4, shadcn/ui - **Database ready** — Drizzle ORM with Neon PostgreSQL, migrations, and seed data - **Fast DX** — Bun runtime, Vite, Vitest, ESLint, Prettier, and pre-configured VS Code settings React Starter Kit is proudly supported by these amazing sponsors: <a href="https://reactstarter.com/s/1"><img src="https://reactstarter.com/s/1.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/s/2"><img src="https://reactstarter.com/s/2.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/s/3"><img src="https://reactstarter.com/s/3.png" height="60" /></a> ## Technology Stack | Layer | Technologies | | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Runtime** | [Bun](https://bun.sh/), [Cloudflare Workers](https://workers.cloudflare.com/), [TypeScript](https://www.typescriptlang.org/) 5.9 | | **Frontend** | [React 19](https://react.dev/), [TanStack Router](https://tanstack.com/router), [Tailwind CSS v4](https://tailwindcss.com/), [shadcn/ui](https://ui.shadcn.com/), [Jotai](https://jotai.org/) | | **Marketing** | [Astro](https://astro.build/) | | **Backend** | [Hono](https://hono.dev/), [tRPC](https://trpc.io/), [Better Auth](https://www.better-auth.com/), [Stripe](https://stripe.com/) | | **Database** | [Drizzle ORM](https://orm.drizzle.team/), [Neon PostgreSQL](https://get.neon.com/HD157BR) | | **Tooling** | [Vite](https://vitejs.dev/), [Vitest](https://vitest.dev/), [ESLint](https://eslint.org/), [Prettier](https://prettier.io/) | ## Monorepo Architecture ``` ├── apps/ │ ├── web/ Astro marketing site (edge router, serves static + proxies to app/api) │ ├── app/ React 19 SPA (TanStack Router, Jotai, Tailwind CSS v4) │ ├── api/ Hono + tRPC API server (Better Auth, Cloudflare Workers) │ └── email/ React Email templates ├── packages/ │ ├── ui/ shadcn/ui components (new-york style) │ ├── core/ Shared types and utilities │ └── ws-protocol/ WebSocket protocol with type-safe messaging ├── db/ Drizzle ORM schemas, migrations, and seed data ├── infra/ Terraform (Cloudflare Workers, DNS, Hyperdrive) ├── docs/ VitePress documentation └── scripts/ Build automation and dev tools ``` Each app deploys independently to Cloudflare Workers. The web worker routes `/api/*` to the API worker and app routes to the app worker via service bindings. ## Prerequisites - [Bun](https://bun.sh/) v1.3+ (replaces Node.js and npm) - [VS Code](https://code.visualstudio.com/) with our [recommended extensions](.vscode/extensions.json) - [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) browser extension (recommended) - [Cloudflare account](https://dash.cloudflare.com/sign-up) for deployment ## Quick Start ### 1. Create Your Project [Generate a new repository](https://github.com/kriasoft/react-starter-kit/generate) from this template, then clone it locally: ```bash git clone https://github.com/your-username/your-project-name.git cd your-project-name ``` ### 2. Install Dependencies ```bash bun install ``` ### 3. Configure Environment This project follows [Vite env conventions](https://vite.dev/guide/env-and-mode#env-files): - [`.env`](./.env) is committed and contains shared defaults/placeholders only (no real secrets) - `.env.local` is git-ignored and should contain your real credentials - `.env.local` values override `.env` ```bash cp .env .env.local # then replace placeholder values with real ones ``` Also check [`wrangler.jsonc`](./apps/api/wrangler.jsonc) for Worker configuration and bindings. ### 4. Start Development ```bash # Launch all apps in development mode (web, api, and app) bun dev # Or, start specific apps individually bun web:dev # Marketing site bun app:dev # Main application bun api:dev # API server ``` ### 5. Initialize Database Ensure `DATABASE_URL` is configured in your `.env.local` file, then set up the schema: ```bash bun db:push # Push schema directly (quick dev setup) bun db:seed # Seed with sample data (optional) bun db:studio # Open database GUI ``` For production, use `bun db:migrate` to apply migrations instead of `db:push`. | App | URL | | -------------- | ----------------------- | | React app | <http://localhost:5173> | | Marketing site | <http://localhost:4321> | | API server | <http://localhost:8787> | ## Production Deployment ### 1. Environment Setup Configure your production secrets in Cloudflare Workers: ```bash # Required secrets bun wrangler secret put BETTER_AUTH_SECRET # Stripe billing (optional — first 4 required to enable, annual is optional) bun wrangler secret put STRIPE_SECRET_KEY bun wrangler secret put STRIPE_WEBHOOK_SECRET bun wrangler secret put STRIPE_STARTER_PRICE_ID bun wrangler secret put STRIPE_PRO_PRICE_ID bun wrangler secret put STRIPE_PRO_ANNUAL_PRICE_ID # optional # OAuth providers (as needed) bun wrangler secret put GOOGLE_CLIENT_ID bun wrangler secret put GOOGLE_CLIENT_SECRET # Email service bun wrangler secret put RESEND_API_KEY # AI features (optional) bun wrangler secret put OPENAI_API_KEY ``` Run these commands from the target app directory or pass `--config apps/<app>/wrangler.jsonc`. Non-sensitive vars like `RESEND_EMAIL_FROM` go in `wrangler.jsonc` directly. ### 2. Build and Deploy ```bash # Build packages that require compilation (order matters!) bun email:build # Build email templates first bun web:build # Build marketing site bun app:build # Build main React app # Deploy all applications bun web:deploy # Deploy marketing site bun api:deploy # Deploy API server bun app:deploy # Deploy main React app ``` ## Backers <a href="https://reactstarter.com/b/1"><img src="https://reactstarter.com/b/1.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/2"><img src="https://reactstarter.com/b/2.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/3"><img src="https://reactstarter.com/b/3.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/4"><img src="https://reactstarter.com/b/4.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/5"><img src="https://reactstarter.com/b/5.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/6"><img src="https://reactstarter.com/b/6.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/7"><img src="https://reactstarter.com/b/7.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/8"><img src="https://reactstarter.com/b/8.png" height="60" /></a> ## Contributors <a href="https://reactstarter.com/c/1"><img src="https://reactstarter.com/c/1.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/c/2"><img src="https://reactstarter.com/c/2.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/c/3"><img src="https://reactstarter.com/c/3.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/c/4"><img src="https://reactstarter.com/c/4.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/c/5"><img src="https://reactstarter.com/c/5.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/c/6"><img src="https://reactstarter.com/c/6.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/c/7"><img src="https://reactstarter.com/c/7.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/c/8"><img src="https://reactstarter.com/c/8.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/c/9"><img src="https://reactstarter.com/c/9.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/c/10"><img src="https://reactstarter.com/c/10.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/c/11"><img src="https://reactstarter.com/c/11.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/c/12"><img src="https://reactstarter.com/c/12.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/c/13"><img src="https://reactstarter.com/c/13.png" height="60" /></a> ## Need Help? **[Documentation](https://reactstarter.com/)** covers auth, database, billing, deployment, and more. Our AI assistant is trained on this codebase — ask it anything on [ChatGPT](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant) or [Gemini](https://gemini.google.com/gem/1IXFElQ2UvvZY86iL6uZLeoC-r8mp-OB-?usp=sharing). Try these questions: - [How do I add a new tRPC endpoint?](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=How%20do%20I%20add%20a%20new%20tRPC%20endpoint%3F) - [Help me create a database table](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=Help%20me%20create%20a%20database%20table) - [How does authentication work?](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=How%20does%20authentication%20work%3F) - [Explain the project structure](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=Explain%20the%20project%20structure) - [How do I deploy to Cloudflare?](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=How%20do%20I%20deploy%20to%20Cloudflare%3F) - [Add a new page with routing](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=Add%20a%20new%20page%20with%20routing) - [How do I send emails?](https://chatgpt.com/g/g-69564f0a23088191846aa4072bd9397d-react-starter-kit-assistant?prompt=How%20do%20I%20send%20emails%3F) ## Contributing See the [Contributing Guide](.github/CONTRIBUTING.md) to get started. Check [good first issues](https://github.com/kriasoft/react-starter-kit/issues?q=label:"good+first+issue") or join [Discord](https://discord.gg/2nKEnKq) for discussion. ## License Copyright © 2014-present Kriasoft. This source code is licensed under the MIT license found in the [LICENSE](https://github.com/kriasoft/react-starter-kit/blob/main/LICENSE) file. --- <sup>Made with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya), [blog](https://medium.com/@koistya)) and [contributors](https://github.com/kriasoft/react-starter-kit/graphs/contributors).</sup>

Web Development JavaScript Libraries & Components
23.6K Github Stars
universal-router
Open Source

universal-router

# Universal Router [![NPM version](https://img.shields.io/npm/v/universal-router.svg)](https://www.npmjs.com/package/universal-router) [![NPM downloads](https://img.shields.io/npm/dw/universal-router.svg)](https://www.npmjs.com/package/universal-router) [![Library Size](https://img.shields.io/bundlephobia/minzip/universal-router.svg)](https://bundlephobia.com/result?p=universal-router) [![Online Chat](https://img.shields.io/discord/643523529131950086?label=Chat)](https://discord.gg/2nKEnKq) <a href="https://www.kriasoft.com/universal-router/" target="_blank"> <img width="64" height="64" align="right" alt="Visit Universal Router Website" src="https://raw.githubusercontent.com/kriasoft/universal-router/refs/heads/main/logo.svg" /> </a> A simple middleware-style router that can be used in both client-side and server-side applications. Visit **[Quickstart Guide](http://slides.com/koistya/universal-router)** (slides) &nbsp;|&nbsp; Join **[#universal-router](https://gitter.im/kriasoft/universal-router)** on Gitter to stay up to date ## Features - It has [simple code](https://github.com/kriasoft/universal-router/blob/main/src/universal-router.ts) with only single [path-to-regexp](https://github.com/pillarjs/path-to-regexp) dependency. - It can be used with any JavaScript framework such as [React](https://reactjs.org/), [Vue](https://vuejs.org/), [Hyperapp](https://hyperapp.dev/) etc. - It uses the same middleware approach used in [Express](http://expressjs.com/) and [Koa](http://koajs.com/), making it easy to learn. - It supports both [imperative](https://en.wikipedia.org/wiki/Imperative_programming) and [declarative](https://en.wikipedia.org/wiki/Declarative_programming) routing style. - Routes are plain JavaScript [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer) with which you can interact as you like. ## What users say about Universal Router > Just switched a project over to universal-router. > Love that the whole thing is a few hundred lines of flexible, easy-to-read code. > > -- [Tweet](https://twitter.com/wincent/status/862115805378494464) by **Greg Hurrell** from Facebook > It does a great job at trying to be _universal_ — it's not tied to any framework, > it can be run on both server and client, and it's not even tied to history. > It's a great library which does one thing: routing. > > -- [Comment on Reddit](https://www.reddit.com/r/reactjs/comments/5xhw3o#form-t1_dejkw4p367) > by **@everdimension** ## Installation Using [npm](https://www.npmjs.com/package/universal-router): ```bash npm install universal-router --save ``` ## How does it look like? ```js import UniversalRouter from 'https://esm.sh/universal-router' const routes = [ { path: '', // optional action: () => `<h1>Home</h1>`, }, { path: '/posts', action: () => console.log('checking child routes for /posts'), children: [ { path: '', // optional, matches both "/posts" and "/posts/" action: () => `<h1>Posts</h1>`, }, { path: '/:id', action: (context) => `<h1>Post #${context.params.id}</h1>`, }, ], }, ] const router = new UniversalRouter(routes) router.resolve('/posts').then((html) => { document.body.innerHTML = html // renders: <h1>Posts</h1> }) ``` Play with an example on [JSFiddle](https://jsfiddle.net/frenzzy/b0w9mjck/102/), [CodePen](https://codepen.io/frenzzy/pen/aWLKpb?editors=0010), [JS Bin](https://jsbin.com/kaluden/3/edit?js,output) in your browser or try [RunKit](https://runkit.com/frenzzy/universal-router-demo) node.js playground. ## Documentation - [Getting Started](https://github.com/kriasoft/universal-router/blob/master/docs/getting-started.md) - [Universal Router API](https://github.com/kriasoft/universal-router/blob/master/docs/api.md) ## Books and Tutorials - 🎓 **[ES6 Training Course](https://es6.io/friend/konstantin)** by [Wes Bos](https://twitter.com/wesbos) - 📗 **[You Don't Know JS: ES6 & Beyond](http://amzn.to/2bFss85)** by [Kyle Simpson](https://github.com/getify) (Dec, 2015) - 📄 **[You might not need React Router](https://medium.freecodecamp.org/38673620f3d)** by [Konstantin Tarkus](https://twitter.com/koistya) - 📄 **[An Introduction to the Redux-First Routing Model](https://medium.freecodecamp.org/98926ebf53cb)** by [Michael Sargent](https://twitter.com/michaelksarge) - 📄 **[Getting Started with Relay Modern for Building Isomorphic Web Apps](https://hackernoon.com/ae049e4e23c1)** by [Konstantin Tarkus](https://twitter.com/koistya) ## Browser Support We support all ES5-compliant browsers, including Internet Explorer 9 and above, but depending on your target browsers you may need to include [polyfills](<https://en.wikipedia.org/wiki/Polyfill_(programming)>) for [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) and [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) before any other code. For compatibility with older browsers you may also need to include polyfills for [`Array.isArray`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray) and [`Object.create`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create). ## Contributing Anyone and everyone is welcome to [contribute](https://github.com/kriasoft/universal-router/blob/master/.github/CONTRIBUTING.md) to this project. The best way to start is by checking our [open issues](https://github.com/kriasoft/universal-router/issues), submit a [bug report](https://github.com/kriasoft/universal-router/blob/master/.github/CONTRIBUTING.md#bugs) or [feature request](https://github.com/kriasoft/universal-router/blob/master/.github/CONTRIBUTING.md#features), participate in discussions, upvote or downvote the issues you like or dislike, send [pull requests](https://github.com/kriasoft/universal-router/blob/master/.github/CONTRIBUTING.md#pull-requests). ## Support - [#universal-router](https://gitter.im/kriasoft/universal-router) on Gitter — Watch announcements, share ideas and feedback. - [GitHub Issues](https://github.com/kriasoft/universal-router/issues) — Check open issues, send feature requests. - [@koistya](https://twitter.com/koistya) on [Codementor](https://www.codementor.io/koistya), [HackHands](https://hackhands.com/koistya/) or [Skype](https://hatscripts.com/addskype?koistya) — Private consulting. ## Related Projects - [React Starter Kit](https://github.com/kriasoft/react-starter-kit) — Boilerplate and tooling for building isomorphic web apps with React and Relay. - [Node.js API Starter Kit](https://github.com/kriasoft/nodejs-api-starter) — Boilerplate and tooling for building data APIs with Docker, Node.js and GraphQL. - [ASP.NET Core Starter Kit](https://github.com/kriasoft/aspnet-starter-kit) — Cross-platform single-page application boilerplate (ASP.NET Core, React, Redux). - [Babel Starter Kit](https://github.com/kriasoft/babel-starter-kit) — Boilerplate for authoring JavaScript/React.js libraries. - [React App SDK](https://github.com/kriasoft/react-app) — Create React apps with just a single dev dependency and zero configuration. - [React Static Boilerplate](https://github.com/kriasoft/react-static-boilerplate) — Single-page application (SPA) starter kit (React, Redux, Webpack, Firebase). - [History](https://github.com/ReactTraining/history) — HTML5 History API wrapper library that handle navigation in single-page apps. - [Redux-First Routing](https://github.com/mksarge/redux-first-routing) — A minimal, framework-agnostic API for accomplishing Redux-first routing. ## Sponsors Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/universal-router#sponsor)] <a href="https://opencollective.com/universal-router/sponsor/0/website" target="_blank"> <img src="https://opencollective.com/universal-router/sponsor/0/avatar.svg" height="64"> </a> <a href="https://opencollective.com/universal-router/sponsor/1/website" target="_blank"> <img src="https://opencollective.com/universal-router/sponsor/1/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/sponsor/2/website" target="_blank"> <img src="https://opencollective.com/universal-router/sponsor/2/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/sponsor/3/website" target="_blank"> <img src="https://opencollective.com/universal-router/sponsor/3/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/sponsor/4/website" target="_blank"> <img src="https://opencollective.com/universal-router/sponsor/4/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/sponsor/5/website" target="_blank"> <img src="https://opencollective.com/universal-router/sponsor/5/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/sponsor/6/website" target="_blank"> <img src="https://opencollective.com/universal-router/sponsor/6/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/sponsor/7/website" target="_blank"> <img src="https://opencollective.com/universal-router/sponsor/7/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/sponsor/8/website" target="_blank"> <img src="https://opencollective.com/universal-router/sponsor/8/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/sponsor/9/website" target="_blank"> <img src="https://opencollective.com/universal-router/sponsor/9/avatar.svg"> </a> ## Backers Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/universal-router#backer)] <a href="https://opencollective.com/universal-router/backer/0/website" target="_blank"> <img src="https://opencollective.com/universal-router/backer/0/avatar.svg" height="64"> </a> <a href="https://opencollective.com/universal-router/backer/1/website" target="_blank"> <img src="https://opencollective.com/universal-router/backer/1/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/backer/2/website" target="_blank"> <img src="https://opencollective.com/universal-router/backer/2/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/backer/3/website" target="_blank"> <img src="https://opencollective.com/universal-router/backer/3/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/backer/4/website" target="_blank"> <img src="https://opencollective.com/universal-router/backer/4/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/backer/5/website" target="_blank"> <img src="https://opencollective.com/universal-router/backer/5/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/backer/6/website" target="_blank"> <img src="https://opencollective.com/universal-router/backer/6/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/backer/7/website" target="_blank"> <img src="https://opencollective.com/universal-router/backer/7/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/backer/8/website" target="_blank"> <img src="https://opencollective.com/universal-router/backer/8/avatar.svg"> </a> <a href="https://opencollective.com/universal-router/backer/9/website" target="_blank"> <img src="https://opencollective.com/universal-router/backer/9/avatar.svg"> </a> ## License Copyright © 2015-present Kriasoft. This source code is licensed under the MIT license found in the [LICENSE.txt](https://github.com/kriasoft/universal-router/blob/master/LICENSE.txt) file. The documentation to the project is licensed under the [CC BY-SA 4.0](http://creativecommons.org/licenses/by-sa/4.0/) license. --- Made with ♥ by [Konstantin Tarkus](https://github.com/koistya) ([@koistya](https://twitter.com/koistya), [blog](https://medium.com/@tarkus)), [Vladimir Kutepov](https://github.com/frenzzy) and [contributors](https://github.com/kriasoft/universal-router/graphs/contributors)

Web Development JavaScript Libraries & Components
1.8K Github Stars
react-firebase-starter
Open Source

react-firebase-starter

<h1> React Starter Kit for Firebase &nbsp; <sup><i>a.k.a. Serverless Edition</i></sup><br> <a href="https://circleci.com/gh/kriasoft/react-firebase-starter"><img src="https://circleci.com/gh/kriasoft/react-firebase-starter.svg?style=svg" alt="Build Status" height="20" /></a> <img src="https://api.dependabot.com/badges/status?host=github&repo=kriasoft/react-firebase-starter" alt="Dependabot" height="20" /> <a href="https://opencollective.com/react-firebase-starter"><img src="https://opencollective.com/react-firebase-starter/backers/badge.svg?maxAge=3600" height="20"></a> <a href="https://twitter.com/ReactStarter"><img src="https://img.shields.io/twitter/follow/ReactStarter.svg?style=social&amp;label=Follow&amp;maxAge=3600" alt="Twitter" height="20"></a> <a href="https://discord.gg/2nKEnKq"><img src="https://img.shields.io/badge/chat-Discord-green.svg?style=social&amp;maxAge=3600" height="20"></a> </h1> **React Starter Kit** _for Firebase_ is a popular project template (aka, boilerplate) for building modern, scalable web applications with React, Relay, and GraphQL using serverless infrastructure provided by <a href="https://cloud.google.com/">Google Cloud</a> (Cloud SQL, Cloud Functions, CDN hosting, and file storage). It allows you to save time and build upon a solid foundation and design patterns. <p align="center"><strong>View</strong> <a href="https://firebase.reactstarter.com">online demo</a> (<a href="https://firebase.reactstarter.com/graphql">API</a>, <a href="https://firebase.reactstarter.com/graphql/model">data model</a>) &nbsp;|&nbsp; <strong>Follow us</strong> on <a href="https://twitter.com/ReactStarter">Twitter</a> &nbsp;|&nbsp; <strong>Get FREE support</strong> on <a href="https://discord.gg/2nKEnKq">Discord</a> &nbsp;|&nbsp; <a href="https://angel.co/company/kriasoft/jobs/"><strong>We're hiring!</strong></a></p> <a href="https://reactstarter.com/s/1"><img src="https://reactstarter.com/s/1.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/s/2"><img src="https://reactstarter.com/s/2.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/s/3"><img src="https://reactstarter.com/s/3.png" height="60" /></a> --- This project was bootstrapped with [React Starter Kit for Firebase][rfs] by [Kriasoft][kriasoft]. ### Tech Stack - [Create React App][cra] (★ 73k) for development and test infrastructure (see [user guide][cradocs]) - [Material UI][mui] (★ 52k) to reduce development time by integrating Google's [Material Design][material] - [Passport.js][passport] (★ 17k) for authentication configured with stateless JWT tokens for sessions - [GraphQL.js][gqljs] (★ 15k) and [Relay][relay] (★ 14k) for declarative data fetching and efficient client stage management - [Universal Router][router] (★ 1k) + [history][history] (★ 6k) for declarative routing and client-side navigation optimized for [Relay][relay] - [PostgreSQL][psql] database pre-configured with a query builder and migrations using [Knex.js][knex] (★ 11k) - [Google Cloud][gcp] & [Firebase][firebase] for serverless architecture - Cloud SQL, Cloud Functions, CDN hosting, file storage ([docs][fbdocs]) Also, you need to be familiar with [HTML][html], [CSS][css], [JavaScript][js] ([ES2015][es2015]) and [React](https://reactjs.org/docs/). ### Directory Layout ```bash ├── build/ # Compiled output ├── migrations/ # Database schema migration files ├── node_modules/ # 3rd-party libraries and utilities ├── public/ # Static files such as favicon.ico etc. ├── scripts/ # Automation scripts (yarn update-schema etc.) ├── src/ # Application source code │ ├── admin/ # Admin section (Dashboard, User Management etc.) │ ├── common/ # Shared React components and HOCs │ ├── hooks/ # React.js hooks and Context providers │ ├── icons/ # Icon components │ ├── legal/ # Terms of Use, Privacy Policy, etc. │ ├── misc/ # Other pages (about us, contacts, etc.) │ ├── mutations/ # GraphQL mutations to be used on the client │ ├── news/ # News section (example) │ ├── server/ # Server-side code (API, authentication, etc.) │ │ ├── mutations/ # GraphQL mutations │ │ ├── queries/ # The top-level GraphQL query fields │ │ ├── templates/ # HTML templates for server-side rendering │ │ ├── types/ # GraphQL types: User, UserRole, UserIdentity etc. │ │ ├── api.js # GraphQL API middleware │ │ ├── app.js # Express.js application │ │ ├── config.js # Configuration settings to be passed to the client │ │ ├── context.js # GraphQL context wrapper │ │ ├── db.js # PostgreSQL database client (Knex.js) │ │ ├── relay.js # Relay factory method for Node.js environment │ │ ├── index.js # Node.js app entry point │ │ ├── login.js # Authentication middleware (e.g. /login/facebook) │ │ ├── schema.js # GraphQL schema │ │ └── ssr.js # Server-side rendering, e.g. ReactDOMServer.renderToString(<App />) │ ├── user/ # User pages (login, account settings, user profile, etc) │ ├── utils/ # Utility functions │ ├── relay.js # Relay factory method for browser environment │ ├── index.js # Client-side entry point, e.g. ReactDOM.render(<App />, container) │ ├── router.js # Universal application router │ ├── serviceWorker.js # Service worker helper methods │ └── theme.js # Overrides for Material UI default styles ├── ssl/ # SSL certificates for connecting to Cloud SQL instance ├── .env # Environment variables for local development ├── .env.production # Environment variables for the production build ├── .env.test # Environment variables for the test build ├── graphql.schema # GraphQL schema (auto-generated, used by Relay) └── package.json # The list of project dependencies + NPM scripts ``` ### Prerequisites - [Node.js][nodejs] v10.15 or higher + [Yarn][yarn] v1.17 or higher &nbsp; (_HINT: On Mac install them via [Brew][brew]_) - [VS Code][vc] editor (preferred) + [Project Snippets][vcsnippets], [EditorConfig][vceditconfig], [ESLint][vceslint], [Prettier][vcprettier], and [Babel JavaScript][vcjs] plug-ins - [Watchman][watchman] file watcher used by Relay Modern - [PostgreSQL][postgres] v9.6 or newer, only if you're planning to use a local db for development ### Getting Started Just clone the repo, update environment variables in `.env` and/or `.env.local` file, and start hacking: ```bash $ git clone https://github.com/kriasoft/react-firebase-starter.git MyApp $ cd MyApp $ yarn setup # Installs dependencies; creates PostgreSQL database $ yarn start # Compile the app and opens it in a browser with "live reload" ``` Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br> <p align='center'><img src='https://camo.githubusercontent.com/506a5a0a33aebed2bf0d24d3999af7f582b31808/687474703a2f2f692e696d6775722e636f6d2f616d794e66434e2e706e67' width='600' alt='npm start'></p> In order to re-compile GraphQL fragments, run `yarn relay` or `yarn relay --watch` (in watch mode). ### How to Migrate Database Schema While the app is in development, you can use a simplified migration workflow by creating a backup of your existing database, making changes to the existing migration file (see `migrations/20180101000000_initial.js`), re-apply the migration and restore data from the backup file (`backup.sql`): ```bash $ yarn db-backup --env=dev # Or, yarn db-backup --env=test $ yarn db-reset-dev # Or, yarn db-reset-test ``` Upon deployment to production, switch to normal migration workflow: ```bash $ yarn db-change <name> # Create a new database migration file $ yarn db-migrate --env=dev # Migrate database to the latest version ``` **HINT**: Test your migration thoroughly with a local instance of the DB first (by using `--env=local` or `--env=dev` (default) flag) then apply it to your `test` or `prod` database instance using `--env=test` or `--env=prod` command argument. Other helpful database scripts: ```bash $ yarn db-version --env=dev # Print the version number of the last migration $ yarn db-rollback --env=dev # Rollback the latest migration $ yarn db-restore --env=dev # Restore database from backup.sql $ yarn db-seed --env=dev # Seed database with test data $ yarn db --env=dev # Open Knex.js REPL shell (type ".exit" for exit) $ yarn psql --env=dev # Open PostgreSQL shell (type "\q" for exit) ``` ### How to Test ```bash $ yarn lint # Check JavaScript and CSS code for potential issues $ yarn lint-fix # Attempt to automatically fix ESLint warnings $ yarn test # Run unit tests. Or, `yarn test -- --watch` ``` ### How to Deploy ```bash $ yarn build # Build the in production mode (NODE_ENV=production) $ yarn deploy-test # Deploy the app to TEST environment $ yarn deploy-prod # Deploy the app to PROD environment ``` For more information refer to the [Deployment](https://github.com/kriasoft/react-firebase-starter/wiki/deployment) guide in the project's Wiki. ### How to Update If you keep the original Git history after cloning this repo, you can always fetch and merge the recent updates back into your project by running: ```bash $ git remote add rsk https://github.com/kriasoft/react-firebase-starter.git $ git checkout master $ git fetch rsk $ git merge rsk/master $ yarn install ``` _NOTE: Try to merge as soon as the new changes land on the `master` branch in the upstream repository, otherwise your project may differ too much from the base/upstream repo. Alternatively, you can use a folder diff tool like [Beyond Compare][bc] for keeping your project up to date with the base repository._ ### Backers <a href="https://reactstarter.com/b/1"><img src="https://reactstarter.com/b/1.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/2"><img src="https://reactstarter.com/b/2.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/3"><img src="https://reactstarter.com/b/3.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/4"><img src="https://reactstarter.com/b/4.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/5"><img src="https://reactstarter.com/b/5.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/6"><img src="https://reactstarter.com/b/6.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/7"><img src="https://reactstarter.com/b/7.png" height="60" /></a>&nbsp;&nbsp;<a href="https://reactstarter.com/b/8"><img src="https://reactstarter.com/b/8.png" height="60" /></a> ### How to Contribute Anyone and everyone is welcome to [contribute](https://github.com/kriasoft/react-firebase-starter/wiki/Contributing) to this project. The best way to start is by checking our [open issues](https://github.com/kriasoft/react-firebase-starter/issues), [submit a new issues](https://github.com/kriasoft/react-firebase-starter/issues/new?labels=bug) or [feature request](https://github.com/kriasoft/react-firebase-starter/issues/new?labels=enhancement), participate in discussions, upvote or downvote the issues you like or dislike, send [pull requests](https://github.com/kriasoft/react-firebase-starter/wiki/Contributing#pull-requests). ### Learn React.js and ES6 :mortar_board: &nbsp; [React for Beginners](https://reactforbeginners.com/friend/konstantin) and [ES6 Training Course](https://es6.io/friend/konstantin) by Wes Bos<br> :green_book: &nbsp; [React: Up & Running: Building Web Applications](http://amzn.to/2bBgqhl) by Stoyan Stefanov (Aug, 2016)<br> :green_book: &nbsp; [Getting Started with React](http://amzn.to/2bmwP5V) by Doel Sengupta and Manu Singhal (Apr, 2016)<br> :green_book: &nbsp; [You Don't Know JS: ES6 & Beyond](http://amzn.to/2bBfVnp) by Kyle Simpson (Dec, 2015)<br> ### Related Projects - [React App SDK](https://github.com/kriasoft/react-app) — Create React App modification that unlocks server-side rendering - [React Starter Kit](https://github.com/kriasoft/react-starter-kit) — Boilerplate and tooling for building isomorphic web apps with React and Relay - [Node.js API Starter Kit](https://github.com/kriasoft/nodejs-api-starter) — Boilerplate and tooling for building data APIs with Docker, Node.js and GraphQL ### License Copyright © 2015-present Kriasoft. This source code is licensed under the MIT license found in the [LICENSE.txt](https://github.com/kriasoft/react-firebase-starter/blob/master/LICENSE.txt) file. --- Made with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya), [blog](https://medium.com/@tarkus)) and [contributors](https://github.com/kriasoft/react-firebase-starter/graphs/contributors) :wave: [Get in touch!](https://twitter.com/messages/compose?recipient_id=16394396) [rfs]: https://github.com/kriasoft/react-firebase-starter [kriasoft]: https://github.com/kriasoft [telegram]: https://t.me/ReactStarter [cra]: https://github.com/facebook/create-react-app [cradocs]: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md [psql]: https://www.postgresql.org/ [cloudsql]: https://cloud.google.com/sql/ [knex]: http://knexjs.org/ [gqljs]: http://graphql.org/graphql-js/ [relay]: http://facebook.github.io/relay/ [mui]: https://material-ui-next.com/ [material]: https://material.io/ [passport]: http://www.passportjs.org/ [html]: https://developer.mozilla.org/en-US/docs/Web/HTML [css]: https://developer.mozilla.org/en-US/docs/Web/CSS [js]: https://developer.mozilla.org/en-US/docs/Web/JavaScript [es2015]: http://babeljs.io/learn-es2015/ [react]: https://facebook.github.io/react/ [relay]: https://facebook.github.io/relay/ [gcp]: https://cloud.google.com/ [firebase]: https://firebase.google.com/ [fbdocs]: https://firebase.google.com/docs/web [router]: https://github.com/kriasoft/universal-router [history]: https://github.com/ReactTraining/history [nodejs]: https://nodejs.org/ [yarn]: https://yarnpkg.com/ [brew]: https://brew.sh/ [wm]: https://facebook.github.io/watchman/ [relaycompiler]: http://facebook.github.io/relay/docs/relay-compiler.html [vc]: https://code.visualstudio.com/ [vcsnippets]: https://marketplace.visualstudio.com/items?itemName=rebornix.project-snippets [vceditconfig]: https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig [vceslint]: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint [vcprettier]: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode [vcjs]: https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel [watchman]: https://github.com/facebook/watchman [postgres]: https://www.postgresql.org/ [bc]: https://www.scootersoftware.com/

Frontend Templates SEO Tools
4.5K Github Stars