Creating a full-stack web application

A step-by-step guide to creating a full-stack web application using a Rails backend and React frontend.

Part 1: Planning & setting up Github repositories

Planning

Once you have determined your app idea you must begin to plan for the instruments you will use to complete your MVP:

User Stories: What features will you have in your app & how will the user interact with them?

Database Design: Define Rails models, including their attributes & relationships.

Wireframes: Draw out a detailed description of the apps layout, this will help you to design the structure of your React components.

Scrum Board: Outlines goals and keep track of your progress.

Create & initialise your Github Repo

1. Create a new repository in github.com for your project
2. Create a local code repository & cd into it:

• This is the folder on your laptop that will store your GitHub project

Git commands

1. Connect your local repository with the GitHub repository you created

<git remote add origin git@github.com:your_username/your_repo_name.git>

2. Add all the Rails/or React files that have been created

<git add .>

3. See a log of the files you have added

<git status>

4. Commit your changes to your remote Github repo with a message

<git commit -m “commit message goes here”>

5. Send an initial commit to your remote GitHub repository

<git push origin branch-name>

Initialising a Rails backend

In order to build applications in JS & use frameworks like React, we specifically need rails to act as an API that responds with JSON

The following actions will be executed in the terminal

1. Firstly install rails

< gem install rails > 

2. Then create a new rails application

<rails new app-name --api >

• The — api flag specifies that application should be API-only
• Controllers will inherit from ActionController::API
• Generators will skip generating views
• The Gemfile will include the rack-cors gem that’s commented out

3. Remember to change into your new Rails app directory before running the git commands

cd app-name

Initialising a React Frontend

The following actions will be executed in the terminal

1. Set up a preconfigured, default React project

<create-react-app app-name>

2. Remember to change into your new React app directory

cd app-name

3. Download all the dependencies form npmjs.com

npm install

4. Run the git commands defined above to initialise your repos

In the next blog of this series we will cover:

Part 2 — Preparing your environments and launching servers