Setting up a React app with Express

Question

My first time posting here and I am completely new to web development so I apologise in advance if there is something similar on here already (I have had a good search)!

In short, I am making an app that fetches images from Instagram based on the users search input. Pretty easy. However, I am using Node and Express server side and React client side and I have googled many React tutorials, Express tutorials and I am confused as to how to even get started. Each tutorial uses different dependancies (which I have tried to Google and understand what they do) and are not explicit sometime as to where to put the code - I have seen app.js, server. js, templates.jsx. Hopefully, someone can explain in layman terms that helps us newbies.

So basically, I'd like some idea of how to set up my app and what files I will need e.g. app.js contains this code, server.js contains this code etc so that at least something shows up on my page.

So far I have this:

// in my app.js

var express = require('express'),
    app = express();

app.use(express.static('public'));

app.get('/hashtag/:hashtag', function(req, res) {
  var token = (removed);

  // this is where id fetch instagram imgs

});

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Instagallery server listening on http://%s:%s', host, port);
});

Thank you very much for any help/information!

react is client side application, the basic with express you bundle it together in static folder which you can set with app.use(express.static(path.join(__dirname, 'public'))); so you put your html, javascript static files inside folder name public. React is basically a web components that has nothing to do with node or express — syarul
– syarul, Commented Sep 27, 2015 at 17:25
Thanks @syarul. I managed to get it up and running now but thank you for explaining what files go where. — lianneharrison
– lianneharrison, Commented Sep 27, 2015 at 19:08

nicholasericksen · Accepted Answer · 2015-12-31 22:02:41Z

1

Late to the party, but this tutorial provides an overview of setting up React with Express and may be useful for others experiencing similar frustrations.

https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#.yjzuy2k97

answered Dec 31, 2015 at 22:02

nicholasericksen

594 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lianneharrison Over a year ago

Not at all, this is awesome @nicholasericksen thank you for sharing!

Rowland Over a year ago

Well that should give you an idea of how things work especially with SSR but some of the libraries used in the tutorial like, react-router has a major update.

HalfWebDev · Accepted Answer · 2017-07-28 11:05:59Z

0

In case any beginner is just looking for only connectivity between react and express then this would be a trimmed down and easier to get started version without babel, testing tools and other not so initially required boilerplate.

https://medium.com/@kushalvmahajan/i-am-about-to-tell-you-a-story-on-how-to-a-node-express-app-connected-to-react-c2fb973accf2

answered Jul 28, 2017 at 11:05

HalfWebDev

7,74814 gold badges72 silver badges110 bronze badges

Collectives™ on Stack Overflow

Setting up a React app with Express

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related