/hello_react_rails_frontend

Hello Rails React [Frontend] is a the backend of a project for integrating Ruby on Rails with React via Webpack. Follow best practices, set up jsbundling-rails gem, create an API for random greetings, and implement React components for a seamless connection between back-end and front-end.

Primary LanguageJavaScriptMIT LicenseMIT

Hello rails react app [Frontend]

logo

📗 Table of Contents

📖 About the Project

This is a simple app to demonstrate how to connect a Ruby on Rails back-end with a React front-end using Webpack. This project helps you achieve the following learning objectives:

  • Implement a connection between a Ruby on Rails back-end and a React front-end.
  • Understand the pros and cons of different approaches for connecting Ruby on Rails with React.
  • Understand how to use Webpack to bundle a React front-end with a Ruby on Rails back-end.

🛠 Built With

  • Ruby on Rails
  • React
  • Webpack
  • PostgreSQL

Key Features

  • Ruby on Rails and React Integration
  • Webpack Configuration
  • React Components
  • Rails greetings from internal API

🚅 Link to back-end repository

Hello rails react app [Back-end]

💻 Getting Started

🛠 Setup

  1. Clone the Project Repository:

    git clone git@github.com:sergio-usma/hello_react_rails_frontend.git

  2. Navigate to the Project Folder:

    cd hello_react_rails_frontend

Prerequisites

Before you can run the app, ensure you have the following prerequisites and configurations in place:

  • Ruby: Verify that Ruby is installed on your machine by running ruby -v in your terminal. If not, download and install Ruby from the official Ruby website.

  • Ruby on Rails: Install the Ruby on Rails framework using the following command if you haven't already:

    gem install rails

  • Code Editor: Use a code editor like Visual Studio Code (VSCode). If you don't have it, download it from the official website.

  • Git: Make sure Git is installed and configured for version control. Download Git from the official Git website.

  • PostgreSQL: Install and properly configure PostgreSQL on your development server. We assumes the use of PostgreSQL as the default database. Download PostgreSQL from the official PostgreSQL website.

  • Ruby on Rails Configuration: Configure your Ruby on Rails project to use PostgreSQL as the default database.

With these prerequisites and configurations in place, you're ready to set up and run the app.

📖 Usage

In the project directory, you can run:

    npm start

  • Runs the app in the development mode.
    Open http://localhost:3000 to view it in your browser.

  • The page will reload when you make changes.
    You may also see any lint errors in the console.

    npm run build

  • Builds the app for production to the build folder.
    It correctly bundles React in production mode and optimizes the build for the best performance.

  • The build is minified and the filenames include the hashes.
    Your app is ready to be deployed!

    npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

To access the API endpoint go to:

  http://localhost:3000/api/greetings/random

👥 Authors

👤 Sergio Usma

🔭 Future Features

  • Personalized Greetings
  • API endpoint working

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page and contribute to the project.

⭐️ Show your support

If you like this project, please consider supporting us! Your support helps us to continue developing and improving our project for everyone to enjoy. Whether it's a small donation, sharing the project with your friends, or contributing your skills and expertise, every little bit makes a huge difference. With your support, we can create something truly amazing together. Thank you for being a part of our community and helping us to make a difference!

🙏 Acknowledgment

I would like to express my heartfelt gratitude to Microverse for providing us with the opportunity to work on this project.

📜 License

This project is licensed under the MIT License.