Teach me how to React-Dougie.

~setting up your React App

[with PostgreSQL, geared towards Mac users]

While many months into my coding journey, I have arrived to the point where I am setting up my first React app partnered with a Rails backend and PostgreSQL is the server for my database. [As opposed to using an SQLite local database, this will give me the ability to upload and host my project later on to the internet. An alternative to Postgres, could be MongoDB]

I have encountered many environment issues setting up Postgres on my Macbook’s local environment. I use VS Code for my local environment and it has been an excellent tool thus far.

Let’s talk set up for a React App. Let’s break it down steps 1, 2, 3, a, b, c.

Part One: Backend Setup

Step A: In the terminal run:

— api : this denotes you will be creating a Rails 5 API by adding this to your code

-side note :[what is an api?]

-it stands for application programming interface and it delivers a users response to a system and send the systems response back to the user

-T : tells your terminal, don’t set up tests for this app.

— database=postgresql : sets up a Postgres database[as opposed to another database, like SQLite]

• pro tip: run rails db:create to ensure you have postgres running.

Step B: In the terminal run:

gem install rack-cors

an alternative: in your Gemfile see that this exists:

gem 'rack-cors'
-you’ll need to make sure this code exists in this file config/initializers/cors.rb

-when you ran Step A this code above ^^ should have been populated, you only need to comment it back in, and possibly adjust the origins to an ‘*’
Step C: Create a separate folder for your backend
-it’s suggested you create a separate folder to hold the back end from the front end of your app as a whole
-when you run Step A’s line of code, all the backend app folders/files will be populated, I recommend going into your Finder to drag and drop them into a new folder dedicated to ‘back-end’: i.e. “‘Your project Name’-backend”
-when you run Step A’s line of code, all the backend app folders/files will be populated, I recommend going into your Finder to drag and drop them into a new folder dedicated to ‘back-end’: i.e. “‘Your project Name’-backend”

Errors with PostgreSQL in setup

If you run into an error with setting up postgresql [as I did], here are some solutions. I discovered I had postgresql downloaded twice in my environment. I had to do a deep dive with a teacher of my coding program to find that out and delete it. If you follow directly from these directions as opposed to the postgresql website, you shouldn’t find yourself with duplicates as I did.

Step D: Error solutions for PostgreSQL setup

-try running this line of code in the terminal to update your homebrew with PostgreSQL:

brew postgresql-upgrade-database

- If you’re experiencing permissions issues:

sudo chown -R $(whoami):admin /usr/local/* \

&& sudo chmod -R g+rwx /usr/local/*

Part Two: Frontend Setup

Step A: Create a Separate folder for your frontend as you did for your backend, to keep the two areas separate/easily managed

Step B: In the terminal run:

npm install -g create-react-app

then in the folder you want to create the app run: create-react-app my-app

Part Three: Filling out the Backend

Now, let’s get the basics of our rails backend setup.

Once your Models/relationships are all mapped out on paper or Lucidchart.com or wherever you have done this, it’s time to create some models/migrations/controllers!

Here’s a shortcut map in text that helped me a lot:

Step A: rails g model “Your Model name” age:integer name

-g, is a shortcut for generate

-Model name is followed by the attributes of the Model that will create it’s schema

- for strings, you only need to type the attribute: i.e. name, topic

-for other types like integer, you must type the name of the attribute followed by a “:” and the type of data it is: i.e.: age:integer, year:integer

Step B: rails g migrate: send your migrations to print

-remember if you need to adjust your migration, be sure to rollback it first

-code for rolling migration back rails db:rollback

-how to rollback a specific migration: rails db:rollback STEP=1

-whatever number follows the “=”sign is the number of migration it will rollback,

If you need more than one rolled back you could change to the number to 4, 5, or however far back in your migration number you wanted to go.

Step C: rails g controller “name of controller here” index show

-create your controller, typing this will populate a controller

-if you add “index, show, edit, new, create, etc.” following the controller name, those method’s will be populated for you to use in the controller file

Step D: rails db:seed

-seed your database with this code!

Now on to create your App and Components as you see fit!

I hope this mini tutorial on setting up a Rails React App, will be a helpful guide and reference for you!