https://github.com/dirheimerb/react-webpack
https://github.com/dirheimerb/react-webpack
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/dirheimerb/react-webpack
- Owner: dirheimerb
- License: mit
- Created: 2022-06-06T20:22:07.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-06T20:22:09.000Z (about 4 years ago)
- Last Synced: 2025-02-01T07:28:57.744Z (over 1 year ago)
- Language: TypeScript
- Size: 1010 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Starter Kit
The web's most popular front-end template for building web applications with
[React](https://reactjs.org/), [Relay](https://relay.dev/), and
[GraphQL](https://graphql.org/).
## Features
- Optimized for serverless deployment to CDN edge locations (Cloudflare Workers)
- HTML page rendering (SSR) at CDN edge locations, all ~100 points on Lighthouse
- Hot module replacement during local development using React Refetch
- Pre-configured with CSS-in-JS styling using Emotion.js
- Pre-configured with code quality tools: ESLint, Prettier, TypeScript, Jest, etc.
- Pre-configured with VSCode code snippets and other VSCode settings
- The ongoing design and development is supported by these wonderful companies:
---
This project was bootstrapped with [React Starter Kit](https://github.com/kriasoft/react-starter-kit).
Be sure to join our [Discord channel](https://discord.com/invite/2nKEnKq) for assistance.
## Directory Structure
`├──`[`.github`](.github) — GitHub configuration including CI/CD workflows
`├──`[`.vscode`](.vscode) — VSCode settings including code snippets, recommended extensions etc.
`├──`[`common`](./common) — common (shared) React components
`├──`[`core`](./core) — core modules and utility functions
`├──`[`dialogs`](./dialogs) — React components implementing modal dialogs
`├──`[`fragments`](./fragments) — common (shared) Relay fragments
`├──`[`hooks`](./hooks) — React hooks such as `useLocation()`, `useCurrentUser()`, etc.
`├──`[`icons`](./icons) — custom icon React components
`├──`[`menu`](./menu) — React components implementing popup menus
`├──`[`public`](./public) — static assets such as robots.txt, index.html etc.
`├──`[`routes`](./routes) — application routes and page (screen) components
`├──`[`scripts`](./scripts) — automation scripts such as `yarn deploy`
`├──`[`theme`](./theme) — application theme - colors, fonts, paddings, etc.
`├──`[`workers`](./workers) — Cloudflare Worker scripts (reverse proxy, SSR)
`├──`[`config`](./config.ts) — client-side application settings per environment
`└──`[`index.ts`](./index.ts) — application entry point
## Tech Stack
- [React](https://reactjs.org/), [Relay](https://relay.dev/),
[Emotion](https://emotion.sh/), [Material UI v5](https://next.material-ui.com/)
- [TypeScript](https://www.typescriptlang.org/), [Babel](https://babeljs.io/),
[ESLint](https://eslint.org/), [Prettier](https://prettier.io/),
[Jest](https://jestjs.io/), [Yarn](https://yarnpkg.com/) v2 with PnP,
[Webpack v5](https://webpack.js.org/)
## Requirements
- [Node.js](https://nodejs.org/) v14 or newer, [Yarn](https://yarnpkg.com/) package manager
- [VS Code](https://code.visualstudio.com/) editor with [recommended extensions](.vscode/extensions.json)
## Getting Started
- Clone the repo
`git clone -o seed -b main --single-branch https://github.com/kriasoft/react-starter-kit.git`
- Install project dependencies — `yarn install`
- Launch the app — `yarn start`, it will become available at [http://localhost:3000](http://localhost:3000/)
**IMPORTANT**: Ensure that VSCode is using the workspace versions of TypeScript and ESLint.
## Scripts
- `yarn start` — Launches the app in development mode on [`http://localhost:3000`](http://localhost:3000/)
- `yarn update-schema` — Update GraphQL API schema by running an introspection query
- `yarn relay` — Updates GraphQL fragments used in the code
- `yarn build` — Compiles and bundles the app for deployment
- `yarn lint` — Validate code using ESLint
- `yarn tsc` — Validate code using TypeScript compiler
- `yarn test` — Run unit tests with Jest, Supertest
- `yarn deploy` — Deploys the app to Cloudflare
## How to Deploy
Ensure that all the environment variables for the target deployment environment
(`test`, `prod`) found in [`/core/*.env`](./core/) files are up-to-date.
If you haven't done it already, push any secret values you may need to CF Workers
environment by running `yarn cf secret put [--env #0]`.
Finally build and deploy the app by running:
```
$ yarn build
$ yarn deploy [--env #0] [--version #0]
```
Where `--env` argument is the target deployment area, e.g. `yarn deploy --env=prod`.
## How to Update
- `yarn set version latest` — Bump Yarn to the latest version
- `yarn upgrade-interactive` — Update Node.js modules (dependencies)
- `yarn dlx @yarnpkg/sdks vscode` — Update TypeScript, ESLint, and Prettier settings in VSCode
## Contributors 👨💻
## Backers 💰
## Related Projects
- [GraphQL API and Relay Starter Kit](https://github.com/kriasoft/graphql-starter) — monorepo template, pre-configured with GraphQL API, React, and Relay
- [Node.js API Starter Kit](https://github.com/kriasoft/node-starter-kit) — project template, pre-configured with Node.js, GraphQL, and PostgreSQL
## How to Contribute
Anyone and everyone is welcome to [contribute](.github/CONTRIBUTING.md). Start
by checking out the list of [open issues](https://github.com/kriasoft/react-starter-kit/issues)
marked [help wanted](https://github.com/kriasoft/react-starter-kit/issues?q=label:"help+wanted").
However, if you decide to get involved, please take a moment to review the
[guidelines](.github/CONTRIBUTING.md).
## 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.
---
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).