Skip to content

Latest commit

 

History

History
executable file
·
60 lines (44 loc) · 2.64 KB

README.md

File metadata and controls

executable file
·
60 lines (44 loc) · 2.64 KB
Raw

⚡️ 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

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

📚 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!