CODEWITHSUNDEEP
node.jsreactjsexpressreact-router
Chaitanya Pilaka
Chaitanya Pilaka

Reputation: 11

Web Application with React and Express

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.

Upvotes: 0

Views: 169

Answers (1)

dreadcast
dreadcast

Reputation: 171

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

  1. Static pages can be pre-rendered at build (index.html, about.html, etc)
  2. Serve static files from a subfolder (i.e. /assets)

  3. When requested URL is prefixed with i.e. /dashboard, make express serve your dashboard:

    http://example/dashboard/some/view => /dashboard.html

  4. 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.

Upvotes: 1

Related Questions