redfin/react-server

How to make dynamic routes?

Closed this issue · 6 comments

I've been reading through the documentation and I can't find any way to dynamically create routes.
Or at least there is no clear statement about this, looks like react-server deliberately make us free to use static files specified in routes.json only.

However, I found this in the doc - we can use dynamic routes, by using routes.js intead of .json :

const fs = require('fs');
const path = require('path');

const routes = fs.readdirSync('./pages').reduce((acc, curr) => {
      const baseName = path.basename(curr, 'js');
      return {
            ...acc,
            [`${baseName}Page`]: {
                  path: [`/{baseName}`],
                        page: `pages/${baseName}`
            }
        };
}, {})
module.exports = {
    middleware: fs.readdirSync('./middleware'),
    routes
}

That's cool, but still not sufficient, its still generating routes from static files.
We should have another way for making route ( like in expressJs routes using wildcards )

Is react-sever aware of this?

It depends on how far you want to go with 'dynamic routes'. Take a look at the react-server-website package routes.js file. It uses regex to identify path name variables

react-server uses yahoo/routr for pattern matching. That documentation is not so great. It complies with pillarjs/path-to-regexp, which has pretty decent documentation.

Our documentation could be improved greatly. Interested in helping with that?

Nice! that's exactly what I'm looking for. Thanks for your comment.
I wonder how to contribute to the doc? Should I create a regular PR in this repo?

Yup, just a regular PR in this repo. The website pulls documentation in the Markdown format from the docs directory.

@drewpc :

I cloned the repo:

$ git clone https://github.com/redfin/react-server.git

then ran :

$ npm run bootstrap

After that, I made some changes to the file docs/guides/react-server-cli.md then compiled the files :

$ cd packages/react-server-website
$ npm run build-assets

Finally started the website :

$ npm start

Actually I find that my change doesn't take effect -completely ignored- is that expected? If not can you reproduce that in your side?

Thanks in advance

@mtrabelsi I'd have to look at the website again, but I seem to recall it pulls the docs from github, rather than the locally checked-out repo, so I think that's expected. It makes it so we don't have to redeploy every time we change the docs.

@mtrabelsi Yep, it's not documented anywhere unfortunately, but you can use local docs for website development with:

$ LOCAL_DOCS=1 npm start