Creating a CRUD application, in less than 2 minutes, with Ruby on Rails and AnduxJS

The “big” problem

If you look around you’ll see that applications usually have the same behaviors, almost all have the same CRUD (create, read, update and delete) logic and for us, developers, it’s boring having to create always the same architecture and functionalities.

Ruby on Rails brought an awesome feature called “scaffold” allowing us to create a fast application only with console commands, it helps a lot if you don’t have much time and need to confirm an idea fast. But the time is changing and the necessity of creating a SPA (Single Page Application) that consumes APIs became very common.

A great, but obvious, idea

Tired to repeat every time the same steps creating API and SPA I decided to create a framework like Ruby on Rails (with scaffolding) but in the front-end side, it’s called AnduxJS. This one can help you scaffolding your CRUD entities fast so you can create the API with Ruby and the SPA with React + Redux. It provides almost all you need to generate pages that communicate with your API’s endpoint automatically. Let’s stop to talk about and see how it works.

Creating the Users CRUD

In this project let’s imagine you have to create a user management feature so you have to list all users, add a new one, remove and edit. We’ll maintain the simplicity and I won’t do a lot of adjustments, we’ll have a normal table and modal forms. AnduxJS uses Ant Design components, it provides a big collection of awesome React components. If you’re interested, click here.

The API

Note: Before creating our API is important you have Ruby on Rails installed on your machine, if you don’t, check here how to proceed.

First of all let’s suppose you’re creating a new project and the first step is initialize our Rails applications, for this tutorial we’re gonna use Rails 5 in API mode. So, you can open your preferred terminal and execute:

rails new users_api --api

After running all processes it's time to create our User entity, we gonna do it using the awesome Rails command called “scaffold”. This one will generate the model, controller, and routes. To register a new user we’ll count on inputs: name, age, email. So, go to the project’s path and just execute:

rails generate scaffold User name:string age:integer email:string

And run database migration:

rails db:migrate

To up our application, execute the command:

rails s --port 4000

Now, you’ve got an API running on your machine. To access the user’s endpoint, go to the browser and just type: http://0.0.0.0:4000/users. All routes will work as well enabling us to read, create, edit and delete users. Magic, no?!

The SPA

Note: Before creating our SPA is important you have NodeJS and Yarn installed on your machine, if you don’t, check here how to proceed.

Once we have our API running it’s time to create our Single Page Application and to do it we’ll use AnduxJS. As described above this one has a scaffold, so, everything will be fast here.

In another terminal tab, clone the project:

git clone git@github.com:fccoelho7/andux.git users_spa

After cloning, go to project’s path and install package dependencies, execute:

yarn install

Now it’s time to configure our API’s endpoint to provide AnduxJS the network communication.

Note: If you’re not using an external API, it has the JSON Server, that is a kind of static API.

Go to the file src/config.js and configure the API base URL setting: http://localhost:4000.

Once you set the configuration, it’s time to generate our User’s page, execute:

yarn andux:new:page

Some questions will appear, you can answer as I did below:

Running AnduxJS CLI

Now, it’s time to start our SPA application and add some new users, execute:

yarn start

After all, go to the browser and access: http://localhost:3000/users. The user’s manager is created and now you can play with that. For improvements purpose, you can access the Ant Design website and check some new components to improve your application.

Managing users after we create our application

We need contributors!

AnduxJS born in the ending of 2018 and is increasing fast. Great stuff like Authentication, i18n etc. Are nice to have and we need your help to make it happen. Feel free to submit your pull request and register any issue if you have. The main goal is to maintain the project simple and easy.

fccoelho7/andux

Thank you! ;)