https://github.com/fatihturker/express-generator-react-typescript-material-apollo-graphql
https://github.com/fatihturker/express-generator-react-typescript-material-apollo-graphql
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/fatihturker/express-generator-react-typescript-material-apollo-graphql
- Owner: fatihturker
- Created: 2020-01-25T16:29:10.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T13:32:38.000Z (almost 3 years ago)
- Last Synced: 2025-01-01T09:10:00.180Z (12 months ago)
- Language: TypeScript
- Size: 951 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.buymeacoffee.com/RwIpTEd)
[](https://ko-fi.com/fatihturker)
# `Express Generator CLI for React with Typescript, Apollo GraphQL Client and Material UI`
This CLI helps to create new implemented front-end demo for React with Typescript, Apollo GraphQL Client and Material UI from a boilerplate.
To have a Full Stack project, or to test created demo, you can setup graphql server with using [Express Generator CLI for Graphql Backend]
## `About the NPM Package`
### Package Installation
```sh
npm install -g express-generator-react-typescript-material-apollo-graphql
```
### Package Usage
Go to the directory on terminal where you want to generate the project.
```sh
$ cd PATH
```
and run the generator command with specifying the project name.
```sh
$ express-generator-rtmag --name="PROJECT_NAME"
```
## `Documentation for the Boilerplate`
When you generate the project, you will have;
### Tech Stack
* [Node.js]
* [Typescript]
* [GraphQL Apollo Client]
* [Material UI]
* [Global Store Manager]
### Features
* GraphQL Queries with implementations in Typescript for Demo User Entity
* GraphQL Mutations with implementations in Typescript for Demo User Entity
* CRUD operations in Typescript for Demo User Entity
* Full Ready CRUD Demo User Components: User List Component, Single User Component, User Dialog Component
### Architecture
This boilerplate has common graphql client design architecture.
**Layers:**
* ***Components*** holds component implementations
* ***Models*** holds document interfaces and schema models
* ***Mutations*** holds basic mutation scripts to send graphql server; create, update, delete
* ***Queries*** holds basic query scripts to send graphql server; retrieve
### Installation
Install the dependencies and devDependencies:
```sh
$ cd
$ npm install
```
Set configuration parameters on **config/index.ts**:
```sh
GRAPHQL_URL: "{{GRAPHQL API URL}}"
```
And that's all, start the client
```sh
$ npm start
```
## `Documentation for the Generator Project`
### Tech Stack
* [Node.js]
* [Typescript]
### Plugins
**express-generator-rtmag** is currently extended with the following plugins. Instructions on how to use them in your own application are linked below.
| Plugin | Usage |
| ------ | ------ |
| [ejs] | to render global parameters like Project Name |
| [inquirer] | to ask questions and parse input |
| [shelljs] | to eliminate your shell script's dependency on Unix |
| [yargs] | to build interactive command line tools |
| [shx] | to wrap around ShellJS Unix commands |
| [ts-node] | to execute TypeScript and REPL for node.js, with source map support |
### Installation
**express-generator-rtmag** requires [Node.js] v10+ to run.
Install the dependencies and devDependencies and start the application.
```sh
$ cd express-generator-react-typescript-material-apollo-graphql
$ npm install
$ npm start
```
To install the CLI globally:
```sh
$ npm run-script build
$ npm install -g .
```
And global usage:
```sh
$ express-generator-rtmag --name="PROJECT_NAME"
```
# `Authors`
* **Fatih Türker**
# `Sponsors`
No sponsors yet! **Will you be the first?**
# `Contributors`
No contributers yet! **Will you be the first?**
# License
----
MIT
[Typescript]:
[Node.js]:
[ts-node]:
[shx]:
[yargs]:
[shelljs]:
[inquirer]:
[ejs]:
[GraphQL Apollo Client]:
[Material UI]:
[Global Store Manager]:
[Express Generator CLI for Graphql Backend]: