https://github.com/didaquis/boilerplate-frontend-react-graphql-apollo

Boilerplate: Frontend with React + GraphQL + Apollo
https://github.com/didaquis/boilerplate-frontend-react-graphql-apollo

apollo-client boilerplate frontend grapqhl react

Last synced: about 1 month ago
JSON representation

Boilerplate: Frontend with React + GraphQL + Apollo

• Host: GitHub
• URL: https://github.com/didaquis/boilerplate-frontend-react-graphql-apollo
• Owner: didaquis
• License: mit
• Created: 2019-11-13T21:41:35.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-11-29T01:05:30.000Z (about 1 year ago)
• Last Synced: 2023-11-29T02:24:58.669Z (about 1 year ago)
• Topics: apollo-client, boilerplate, frontend, grapqhl, react
• Language: JavaScript
• Homepage:
• Size: 2.37 MB
• Stars: 15
• Watchers: 3
• Forks: 10
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ⚡️ Boilerplate: Frontend with React + GraphQL + Apollo

This project is an easy and fast way to start new projects in JavaScript. 

The main goal is to provide two repositories: one for the backend and one for the frontend application. 

This repository is for the frontend and is designed to work with another boilerplate: [the backend](https://github.com/didaquis/boilerplate-backend-node-graphql-mongodb)

If you prefer it, you can use one of these boilerplates without using the other! Feel free to explore any ideas like developing your own backend in PHP or your frontend in Angular, for example.

### 🎁 What is included on the frontend boilerplate?

Technologies used are: React + GraphQL + Apollo Client + Bootstrap 4

**✨ These are some of the highlights:** 

✅ A frontend application ready to use!  

✅ Users can login and registrate  

✅ Separated routes for users with the role of the 'administrator'  

✅ Ready to connect with backend  

✅ If you don't like Bootstrap, it's easy to implement any other one UI library or use your own CSS  

### 📝 Frontend Requirements

* Backend must be running. I recommend use my [backend boilerplate](https://github.com/didaquis/boilerplate-backend-node-graphql-mongodb)

* Node.js 18.15 or higher

### 📚 How to run the application?

* Use the command: `npm install`.

* Configure the application:

  * Duplicate the configuration file `_env` and rename it as `.env`

  * Edit the file `.env`

* Then use: `npm run start`. 

### 🚀 How to deploy?

* Use the command: `npm install --production`.

* Make sure you have the correct environment vars configuration on the `.env` file.

* Then use `npm run build` to create a production bundle. This bundle will be created in the `./build` folder.

* The content of `./build` folder is ready to be deployed to production.

**Do you need help with `.env` file?** 

Don't worry, here you have a guide:

| Key | Description |

|-----|-------------|

| REACT_APP_PROTOCOL | Protocol to communicate with backend. Set http or https |

| REACT_APP_HOST | Host of backend. An IP or domain |

| REACT_APP_PORT | Port of backend |

| REACT_APP_GRAPHQL | Endpoint of GraphQL API |

### 💻 Tricks for development

* Run app in dev mode: `npm run start`

* Run the linter: `npm run lint`

### Would you like to contribute to this project?

It would be great to receive your help. ♥️ 

You can collaborate in multiple ways, of course. Let me give you some ideas:

* Help me with this documentation. If you think something it's not clear, open an issue and talk to me!

* Share this project, mark it as a favorite (⭐️) or make some suggestions

* Help me to improve the implementation of React. I'm not an expert!