Phoenix as Backend framework (React Frontend)

Please watch the videos under Resources before class.

Today we are following someone else's instructions to get a phoenix webserver working and operational. In the following section I only list deviations/updates to the original guide for classroom use.

React + Phoenix Guide (3 points)

Original guide by Bruno Paulino, from January, 19, 2022 can be found here.

Please follow along the guide, i did test it yesterday it still works well. A few notes BEFORE you start reading though:

• When instructed to create a new phoenix project in your ~/workspace folder.
• We will not go through the trouble of deploying thus there is no need to continue with the section "Creating an Elixir Release" once you get there. Do scroll down to the "Wrapping Up" section though and read it as carefully as you read the rest
• The guide will refer to a port 3000 for your React frontend. This might be different in your case. Just go with the port that is used when the server is spawned.
• Read everuthing carefully, there is a great many things to be learned here. If you encounter anything that doesn't make sense ask me or AI for clarification!
• Do the steps together with your partner and help each other out.

You will get 3 points if you can demonstrate the two pages served via React through Phoenix shown in the video by following this guide.

Database Backend

One reason we would want a React Fontend and a Phoenix Backend to serve database query requests to an already existing React frontend.

To simulate a database backend add the following function to your page_controller.ex:

def sample_data(conn, _params) do
  # We could just as easily load data from a database here
  data = Enum.shuffle(1..10)

  # instead of rendering a page we sent back a JSON response with JSON data.
  json(conn, data)
end

This is a simple action that, when called, returns a JSON response with the numbers from 1 to 10 in random order.

Add a route that uses the api scope to your router.ex:

scope "/api", PhoenixReactWeb do
  pipe_through :api

  get "/sample-data", PageController, :sample_data
end

Notice that the :api pipeline bypasses all the usual stuff like checking the session, adding a layout, creating a CSRF token. It only configures the connection to accept exclusively json requests.

You should now be able to visit...

http://localhost:4000/api/sample-data

...and marvel at your sequence of numbers!

Loading data via AJAX request (4 points)

The second and final objective today is to get those numbers displayed on your React frontend by making a AJAX request to the server and processing the response.

Show your numbers on the react main page

http://localhost:4000/app

You should also create a button that, when clicked, reloads and displays 10 new numbers (over the old ones)

I will leave it up to you to research the web on how to make a Ajax request to a server and process the input in React. Don't get entangled with too many details about a new framework (that is not the point) and instead just focus on finding a working solution. This is good practice on when you are on your own after this course and need to solve a particular problem.