4

I want to build a web app with React.

When users visit the site, they will see a Landing Page, can go to a Pricing Page, an About page, a Blog. etc. They can also Sign Up or Log in and then there's the actual app. I would like render certain pages (Landing,Pricing,About,Blog) statically, but would like to leave everything behind the SignUp/Login-Wall client-side rendered.

(First, because it cannot be static, since this is dynamic content. And also, because I do not care about SEO here anyways, so a major reason for next.js falls away, since the app is behind a SignUp/Login Wall anyways.)

Questions: First of all: Does this make sense? And secondly: How could I implement something like this? I haven't found anything online! Is this unheard of? I would like to use Gatsby.js for my static content, but I am not sure how to bring the client-side-rendered bit into the mix. I have worked with create-react-app before, which does client-side-rendering, - but I am not sure how I would go about the implementation?

R. Kohlisch
  • 2,823
  • 6
  • 29
  • 59
  • This makes sense. We have lot real world applications that use something similar to this. For development, my approach would be to run the static on a different port and reactjs in a different port. For production, you can make use of rules in `nginx or apache` to route different paths to different build directories and serve the respective file. – Panther Feb 26 '19 at 10:36
  • https://github.com/sw-yx/jamstack-hackathon-starter – ksav Feb 26 '19 at 10:44
  • 1
    Your question is a little bit broad for stackoverflow. But have a look at the above link and at the blog post https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/ for some ideas. Good luck! – ksav Feb 26 '19 at 10:50
  • Thank you so much @Panther & ksav – R. Kohlisch Feb 26 '19 at 10:55

2 Answers2

4

I will try to explain the process behind jamstack-hackathon-starter (which @ksav commented).

It is a starter template for gatsby that allows you to save static pages in-
conjunction with dynamic pages (client-side react app) - a "Hybrid Gatbsy App".

Manual Steps:
1. Create a folder src/app which will contain your client-side react app.
2. Create a file in src/pages called app.js, with the following contents: 

// I'm using create-react-app's structure
import App from '../app/src/App' // make sure this path corresponds to your path

export default App
  1. Now install gatsby-plugin-create-client-paths:
    npm install --save gatsby-plugin-create-client-paths
  2. Configure it by adding it to gatsby-config.js like so:
 plugins: [
 {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/app/*`] },
 },
 ...
  1. This will result in everything within /app to only be rendered in the browser (ie client-side).
  2. Go to your browser after building (gatsby develop) and check /app
funerr
  • 7,212
  • 14
  • 81
  • 129
  • perfect, thanks. does this make sense for bigger apps too, or not really? – R. Kohlisch May 19 '20 at 08:22
  • @R.Kohlisch yes. I found this question because it seemed like the logical approach for a big project too (landing page + login protected app). It does seem to be quite slow to run `gatsby develop` though (I hope they fix it soon), but still, conceptually it does make sense. – funerr May 19 '20 at 10:09
0

According to npmjs The plugin gatsby-plugin-create-client-paths is deprecated.

https://www.npmjs.com/package/gatsby-plugin-create-client-paths

This plugin's functionality is now built-in to Gatsby. Use the File System Route API: https://gatsby.dev/creating-client-only-routes. This package will no longer receive updates.

m4d0
  • 1
  • 1