mohashyne / hello_world-rails_react

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Tutorial
  • Install
  • Usage
  • Run tests
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 [hello_world-rails_react]

hello_world-rails_react, is a way to greet someone in a very difficult way

🛠 Built With

Tech Stack

Client

• Ruby
• Ruby on Rails
• React-redux
• axios

Ruby on Rails

• Ruby on Rails introduction

Server

• N/A

Database

• PostgreSQL

Key Features

• ROR
• Devise
• cancancan
• Rspec
• Capybara
• React-redux
• axios

(back to top)

💻 Getting Started

To get a local copy of this project and run it in your computer, follow these steps.

Prerequisites

In order to run this project you need:

• Ruby 3.0.1 or above
• Ruby on rails 7.0.8 or above
• node and yarn installed on your system.
• npx version 7.1.0 or later.

Tutorial

This project was build in windows 10, using vscode.

To create this project run the following command:

rails new -j esbuild hello-rails-react -d postgresql

generate a controller and view to serve your new react app:

rails g controller Root index

Overwrite the contents of app/views/root/index.html.erb with:

<div id="root">

Change the root in config/routes.rb to your new view:

Rails.application.routes.draw do
  root 'root#index'
end

Add your react app to app/javascript/application.js:

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (<h1>Hello World!</h1>);
}

ReactDOM.render(
  <App/>,
  document.getElementById('root'),
);

Add --loader:.js=jsx to the build script in your package.json:

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --loader:.js=jsx"
  },
  "devDependencies": {
    "esbuild": "^0.14.38",
    "esbuild-loader": "^2.18.0"
  }
}

run the following line to instal babel:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

run the following line to instal react-router-dom

npm install react-router-dom

install foreman gem:

gem install foreman

edit the contents of Procfile.dev to this:

web: rails s
js: yarn build --watch

By that point you should have rails react correctly setup. To run the project, run

foreman start -f Procfile.dev

For installing react-redux, @reduxjs/toolkit and axios, run the following:

npm install react-redux
npm install @reduxjs/toolkit
npm install axios

The file structure for react-redux is in the javascript folder, as it follows:

|-- app/
|   |-- javascript/
|   |   |-- components/
|   |   |   |-- App.js
|   |   |-- redux/
|   |   |   |-- store.js
|   |   |-- application.js

Then, customize as you like to follow your requirements

Setup

To get a local copy up and running follow these simple example steps.

Clone this repository in the desired folder:

cd my-folder
git clone https://github.com/mohashyne/hello_world-rails_react.git

Install

To install this project:

cd hello_world-rails_react
code .
bundle install

Usage

To run the project, make sure you configured your database correctly, then execute the following command:

  rails db:create
  rails db:migrate
  rails db:seed

After the database is set up, run the following command:

foreman start -f Procfile.dev

Go to http://localhost:5000/ and see it working.

You can also run this using 2 terminals:

In one, run: rails server

In the other, run: yarn build --watch

Then check the link of the rails server (it should have changed to http://localhost:3000/)

Run tests

Not implemented tests

(back to top)

👥 Authors

👤 Muhammad Aminu Salihu

• GitHub: @mohashyne
• Twitter: @muhammadslyhu
• LinkedIn: muhammad-salihu

(back to top)

🔭 Future Features

• Nothing so far

(back to top)

🤝 Contributing

I welcome contributions to enhance the functionality and user experience of the Morse_Translator project. If you have any ideas, suggestions, or bug reports, feel free to open an issue or submit a pull request.

If you'd like to contribute to this project, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them with descriptive commit messages.
4. Push your changes to your forked repository.
5. Submit a pull request to the main repository, explaining your changes in detail.

Please adhere to the coding conventions and guidelines specified in the project.

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

(back to top)

⭐️ Show your support

If you like this project give it a star ⭐️

(back to top)

❓ FAQ

• Can I use the project for any purpose?

  • Yes, you can use this files for anything you need

• Do I need to ask for permission?

  • No need to ask for permission.

🙏 Acknowledgments

** I would like to thank to Microverse for giving this inspiring project **

(back to top)

📝 License

This project is MIT licensed.