Using Express with create-react-app | Voting App

1

Hi all,

I’m just beginning the Build a Voting App challenge in the Back End Development projects and I’m having a lot of difficulty figuring how to use Express with create-react-app. The goal I have in mind is for express to serve the React app when I run npm start.

I feel like this may be the solution but I don’t really understand it: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development

Does anybody have experience of using Express with create-react-app in development?

Thanks
Rob

2

I got half way through Voting app before parking it and moving on to other things.

Having said that, we got the app working with React and Node using Express.

app.use('/', index);
app.use('/api', api);
app.use('/user', user);
app.use('/Polldetailfull/:id', index);
app.use('/editthepoll/:id', index);

If you look at the app.js file https://github.com/JohnnyBizzel/voting-app/blob/no-auth0/app.js
I have set up routing so index goes to the React index file.
/api goes to any API calls
/user is not currently used
and the other 2 routes are use for refreshes of these routes.
We also used React Routing.

More routing code is found here in index.js:

That’s not using “Create React App” but I hope this info helps.

1 Like
3

I used React-Router for the user accessible pages (public facing) and Express for the backend API. I ended up using a proxy and essentially running two concurrent processes, as detailed here:

https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

As a side note for deployment, I used the buildpack described here:

https://github.com/mars/create-react-app-buildpack

1 Like
4

Thanks bhefty, from the link you posted I discovered this:

… which at first glance seems to be a minimal boilerplate for setting up express with create-react-app. Hopefully just the thing to get me started :slight_smile:

5

Awesome find! Thanks for sharing, I think I may use this as well now.