- 📖 About the Project
- 💻 Getting Started
- 👥 Authors
- 🔭 Future Features
- 🤝 Contributing
- ⭐️ Show your support
- 🙏 Acknowledgements
- 📝 License
hello_world-rails_react, is a way to greet someone in a very difficult way
Client
Ruby on Rails
Server
Database
- ROR
- Devise
- cancancan
- Rspec
- Capybara
- React-redux
- axios
To get a local copy of this project and run it in your computer, follow these steps.
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.
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
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
To install this project:
cd hello_world-rails_react
code .
bundle install
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/)
Not implemented tests
👤 Muhammad Aminu Salihu
- GitHub: @mohashyne
- Twitter: @muhammadslyhu
- LinkedIn: muhammad-salihu
- Nothing so far
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:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and commit them with descriptive commit messages.
- Push your changes to your forked repository.
- 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.
If you like this project give it a star ⭐️
-
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.
** I would like to thank to Microverse for giving this inspiring project **
This project is MIT licensed.