Building a Full Stack React App

Hey all,

I’m starting the book trading club application and I’d like to try my hand at making it with React. I understand how to make a frontend only app with React, and how to make fullstack apps with node/express, but how do I connect the two ideas?

Can someone either explain a decent methodology or point me to some readings? I’ve read https://daveceddia.com/create-react-app-express-backend/, and I think I’m headed in the right direction, but I’m not exactly sure how to handle users signing up, passwords, from the React portion.

Am I overthinking this? Users go to the registration page, submit the form, that data gets passed to the backend via a fetch-post request, resolves, and feedback is passed back to the client?

1 Like

Have you looked at Passport? If authentication is what worries you, that might be a good way to go. You do want to make sure you do authentication right. When you store passwords, they need to be salted and hasehed. When users log in, you’ll compare the hash instead of the actual password. That sort of thing. Passport has all those best practices already built in for you.

check out this thread SunburstJS: Seeking A Mentee
this repo https://github.com/sw-yx/sunburstjs

I got to be the mentee with sw-yx … hes working on a repo for people to use for setting up react with backend.
so over the last week we got to-gether on google hangouts and he showed me how to do it … on our last talk we had it up and running plus we added passport … so now we have a react page connected to backend which is linked to a mongoose database and use passport for signup login and logout.

So you should find it easy if you allready know react and have backend with node/express.
As your basically using create-react-app to create the react section which will be in a client folder then in a server folder your creating a server for the backend
you use package called concurrently on server side to start both server side and client .
and you create a proxy in package.json on client side so both can communicate with each other

His version uses yarn on the client side instead on npm … i didnt have yarn installed so i used npm … just forgot to change scripts in react package.json when i tried it first and couldnt get it to work … so then i just changed the word yarn to npm in the package.json scripts and then it worked.

Now im only learning react about a week and i had no real problems (have used vue and did a server side rendering project with nuxt.js so this helped me understand the react )

After it was up and running he explained how things worked and i understood it. as i have created servers with node/express and done some work with vue.

Passport … if you have no experience with passport that might be a problem … but he could be posting the video of adding passport so that will help.
As i have used passport with my vote app and my vue nuxt.js project i basically copied the files from the vue nuxt.js version to the react project and they worked.

only had one small problem then … could signup and create a session login and logout … everything worked … but couldnt get the req.user from react when i refreshed the react page … which i could on the server. discovered a line of code needed to be added to react when after setting the headers. so with that sorted everything worked.

After this i added redux for state management and got that working
now all i have to do is learn about router v4 so i can make it look like i have different pages in my app.

Anyway im willing to help you with this and if you need help setting it up and go this route just post here and id be happy to help out with what i can.

It’s really difficult to get started with a full stack application without any guidance. I could try explaining it but it would take at least a few pages of text. What helped me out was this course https://www.udemy.com/node-with-react-fullstack-web-development/learn/v4/t/lecture/7607678?start=0 I’m sure there’s other similar guides out there on the internet for free if you don’t mind taking the time to research them. Good luck with it!

Hey,

If you want, I’ve created a repo that contains some boilerplate code to get started on a full stack react app : https://github.com/thomlom/react-full-stack-boilerplate

Maybe seeing some code will help you :slight_smile:

1 Like

Assuming that you already know how to set up your API microservices, if not do the url shortner project :

https://www.freecodecamp.org/challenges/url-shortener-microservice

then you can follow this tutorial and set up passport:

This will give you a decent / basic idea on how passport works, next you can modify and customize it to meld with your react front end. Note , for authentication and consuming your api I found that having one major ‘parent’ state (ala redux) helped, you can use redux thunk middleware to intercept directives from your individual react components and your api micro services.

Edit: Actually slight correction, it may be best / easier to first learn how to consume your API without authentication and just with your react front-end (with or without redux) , and then do the passport tutorial and customize, etc…