Full-Stack Help

1

So right now I am feeling stuck on my first full-stack app and having a tough time figuring out how to connect my front-end to the backend. I’m using react-redux on the front end and plan to use node/express/mongo on the backend. My front-end is fully functioning and works perfectly, but I need a way to update the state of all of the instances of the app every time the state on one instance changes. I also need to keep an updated copy of the state in mongodb. The only thing is I am not sure the best way to do this. I tried socket.io but I’m having issues with it and I feel like it might be over engineering the problem anyways. Should I set up a completely separate api that deals with this data and then just make ajax requests whenever I want to update the global copy of the state? I would love any advice or resources that helped you create your first full-stack app.

github repo: https://github.com/twmilli/voting-app

Thanks in advance!

2

I haven’t completed the voting app yet, but I think socket.io is the right choice here (I’m planning on using ActionCable in Rails - same idea). The modern approach is to have the server push updates to each client, which is what websockets is all about. If you wanted to stick with HTTP, you’d have to poll the server for updates.

I don’t have any resources to recommend, but I would encourage you to learn everything you can about scoket.io and get a much simpler side-project running before you finish your voting app. It’s the right way to go, and it’ll be useful for your stock-ticker app, too.

3

I didn’t have seperate front and back ends (the server rendered the views) for my voting app, but the pairboard app many of us are working on does.

It also uses socket.io (as of 8 hours ago!), but this wasn’t necessary to get the two ends communicating with each other.

Take a look at how we use the fetch() method (which has some polyfills in the background - fetch() doesn’t have super support yet). Fetch let’s you get, post, delete, put etc.

One thing we haven’t done yet is pass authentication around…that feels quite complicated at the moment. (I think cookies/sessions will be the answer)

The repos are here if you’re interested:

2 Likes
4

I just finished my Voting app and I implemented GitHub authentication. At first all that Passport stuff seemed too complex to grasp, but in reality it’s just another middleware, with a bit of configuration.
Only thing I haven’t figured out yet is the testing of protected routes.

5

Your code is beautiful, your app is beautiful. This will be a massive help to helping me structure my backend as well as managing debug and production environments.

6

@twmilli

If you want your data to persist across different sessions, then you’ll need to setup a server and common ways to send and receive data from the server are HTTP and websocket protocols. You’ll probably want to compare and contrast the 2. In general, HTTP is more common for web apps where a connection is opened, data is sent, and then the connection is closed. Websockets allow a connection with the server to stay open so that data can be send continuously.

So if you’re using redux, then your state is maintained in a single store shared across your views. What you’ll want to do is dispatch actions from these components to request data and update your store with the data you receive. React then takes care of re-rendering your views with the data.

Redux requires middleware to handle asynchronous actions like server requests. The most popular one is called “redux-thunk”. This allows your action creators to return functions instead of an object. When the middleware sees a function, it will execute the function for you. https://github.com/gaearon/redux-thunk

So what does this returned function inside your action creator look like? If you’re using HTTP, then it’s just a standard HTTP request like GET or POST. As Jackson mentioned, the fetch API is a popular way to do it. Make sure you use a polyfill like “isomorphic-fetch” because fetch lacks full browser support. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

If you’re trying to wrap your head around redux, there’s is a great series on redux from thenewboston that helped me greatly https://www.youtube.com/watch?v=DiLVAXlVYR0

Hopefully this is helpful! Let me know if you have questions

4 Likes
7

I can take precious little credit for the app’s beauty.

The likes of @jenovs, @portablestick and a whole heap of others really did the heavy lifting :slight_smile:

8

This is great info as well. I am LOVING redux so far, I had mix feelings about react after using it without redux but now i’m obsessed. Think I will try to go for sockets as it makes more sense in this use case

9

thanks very much for sharing that link from thenewboston. The guy explains it very well. It’s funny because everyone keeps saying how easy Redux is, yet, apart from this video series from thenewboston, I haven’t found anyone being able to explain it well enough. (or maybe it’s because i’m slow lol)

Anyway, do you have a link to share that could help and explain how to combine React/Redux with Express in the app ? I start to understand how I am going to start my voting app, yet haven’t figured out how to add Express/Node into the mix.

Also, haven’t understood yet the difference between routing with React and routing with Express.

10

3 posts were split to a new topic: Help with adding color

11

For sure, he does a great job distilling the concepts and using plain language we can understand. Have you checked out the FCC React-Redux challenges too? They’re also great. Once you have the basics down and you’ve built something with Redux, I would recommend watching Dan Abromov’s free courses on Egghead (links below). You’ll get further insight into how to integrate Redux into React and some best practices for creating bigger apps.

For combining Express with React, the most simple way I’ve seen is to use built-in Express middleware to serve a base html file that you render your top-level React component to. Then you have a wild-card catch-all route that also serves the index file. This funnels all traffic to your main client-side route. Probably not suitable for production apps, but easy for building single page apps for learning. I’ve included a code sample below where the client-side bundle would be in a “build” directory. From this root route, you can use a router like React Router to allow users to navigate your app.

To do server-side rendering in React, it’s more complicated since you’ll need to match the request url to a route, render the React on the server (and any state) and then transmit this to the client-side. Seems like this is the way to go if you want things like SEO for a production app. You can look at the implementation on some boilerplate React apps. I’ve linked the most starred 1 on GitHub. I’m working on a lighter-weight one to use on my own projects that has MongoDB, Passport. It’s a great way to learn. I’ve linked them below. Hope this helps!

Sample code

// index.html

<html>
  <head></head>
  <body>
    <div id="root"></div>
  </body>
</html>

// server.js
const express = require("express");
const app = express();
const path = require("path");

app.use("/", express.static(path.resolve(process.cwd(), "build"));

app.get("*", (req, res, next) => {
    res.sendFile(path.resolve(process.cwd(), "build"), "index.html");
});

Redux course from Dan:

https://egghead.io/courses/getting-started-with-redux
https://egghead.io/courses/building-react-applications-with-idiomatic-redux

Popular React boilerplate with universal/isomorphic routing:

My personal boilerplate: