Web Application with React and Express

Question

I am a new Nodejs developer and I wanted to understand a few things about creating a web app with react and express.

I want to do the following:

-> My web applications will have around 5 static pages which include the home page, about us page etc. From my reading, I understand that these static pages will need to be rendered server side for SEO optimization.

-> I am also creating a user dashboard which will be made completely in react to serve as a single page application once the user logs in.

-> Thirdly, I also want to have a portion of the web app render different content based on url. For example: mywebsite/test1 should render content about test1 while mywebsite/test2 should render content about test2. I understand that this can be done through react but because I also want these urls to be SEO so the content will have to be rendered serverside.

How would I go setting up such an application? My initial thoughts are as follows:

Have an express app where I have routes defined for the 5 static pages. I can render html directly for these 5 pages.

For the dashboard, I can have an express route forward the request to react/react router and take it from there.

Similarly for the 3rd part I was use the express route to direct to a react component.

Is this the right way to go about it?

Thanks! Do let me know if I missing something or if I'm conceptually wrong about something.

This question is far too broad. Voting to close.

tommyd456
– tommyd456

2017-06-08 09:19:21 +00:00
Commented Jun 8, 2017 at 9:19 — tommyd456
– tommyd456, Commented Jun 8, 2017 at 9:19

dreadcast · Accepted Answer · 2017-06-08 09:40:57Z

1

All I understand is that you're doing some kind of isomorphic app.

Static pages can be pre-rendered at build (index.html, about.html, etc)
Serve static files from a subfolder (i.e. /assets)
When requested URL is prefixed with i.e. /dashboard, make express serve your dashboard:

http://example/dashboard/some/view => /dashboard.html
In your dashboard, you'll probably use React Router. Your Router will then dispatch URLs to desired components:

import { Route } from 'react-router'; import SomeView from 'app/components/some/SomeView.jsx'; <Route path='/dashboard/some/view' render={SomeView} />

You'll find a lot of examples on GitHub or articles here or here related to isomorphic apps.

answered Jun 8, 2017 at 9:40

dreadcast

1717 bronze badges

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

Collectives™ on Stack Overflow

Web Application with React and Express

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related