DEV Community

Cover image for These queens love JSON
JaredHarbison
JaredHarbison

Posted on • Edited on

1

These queens love JSON

Rails + React + Redux - Pt 7


While I plan to revisit the previous posts' gists for refactoring- I'll move ahead in the project. I can now seed the database and view the data in cleaned JSON thanks to JSONView. I can also start setting up some structure on the front end.


Let's get started!


I call the scraping and association methods in db/seeds.rb and run the following commands to get the data.

$ rails db:create && rails db:migrate && rails db:seed

Then voila! start your engines! We have data to see at localhost:3000/api/v1/

$ rails s

... is all you need to ensure everything is working to this point. The queens, seasons, and episodes paths will all show their nested associations.

Alt Text

With the backend serving the JSON, a proxy needs to be set inside package.json from within the frontend directory. This will allow for communication between the React and Rails aspects of the project.

I decided to use the api/v1 convention with future versioning in mind. When I run foreman to start both the React and Rails servers, it will serve the Rails server on the 5000 port and the React server on the 5100 port.

{
"name": "frontend",
"version": "0.1.0",
"proxy": "http://localhost:5000/api/v1",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"react-twitter-embed": "^2.0.8",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.87.3"
view raw package.json hosted with ❤ by GitHub

In the next post I will start the foundation for React, Redux, and Thunk on the front end.


That's all folks!

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more