Static Export about after.js

[jaredpalmer]

this is almost identical to react-static, i would suggest using that.

[ddemaree]

@jaredpalmer yes yes a thousand times yes this

I was just about to fork this repo to add support for this (via static-site-generator-webpack-plugin and extracting some bits of server.js for reuse). Did you have a plan for how the user-facing API for export should work (e.g. how a user should specify a list of [possibly dynamically generated] routes, any hooks for pre/post build), so I can maybe send you a usable pull request someday?

[jaredpalmer]

Haven't given this too much thought. Was going to look at inspiration from react-static and a few other places.

Design Requirements

• Be able to easily leverage the filesystem for dynamically generated routes. So you can have a posts directory for a blog.
• Avoid JSON route config if possible
• No trailing slashes because it's 2018, not 2008

[ddemaree]

My immediate use-case is to generate a bunch of blog routes from a Contentful space. On Gatsby, I'm currently doing one GraphQL query to pull in everything, then calling createPage a bunch of times for both individual and archive pages.

Here, what seems nice off the top of my head (not having looked at react-static) is to have an async function in the config file that returns/resolves to an array/object with URIs and (optional) props, which an after export script would use to build pages. This function could also serve as a "before" hook where I could (for example) pull CMS data down in one go, and have my getInitialProps functions pull from that instead of HTTP.

Something like this:

// in after.config.js
const getPosts = require('./example-path/getPosts')

module.exports = {
  exportPathMap: async () => {
    // Returns an array of post objects. Where this function gets its data is irrelevant — it could be an API, the filesystem, whatever
    const allPosts = await getPosts()

    const postsExportMap = allPosts.reduce((postsMap, post) => {
      postsMap[`/posts/${posts.year}/${posts.slug}`] = { post }
      return postsMap
    }, {})

    return postsExportMap
  }
}

If someone wanted to pull in Jekyll-style files as a data source — instead of or in addition to API data like Contentful — that'd be as simple as traversing that directory, processing the files, and including them in the return array.

If some kind person wanted to write (or has already written?) a module that reads a directory of .md files, does Remark and GreyMatter on them, and returns them as an array of JS objects, that could come in quite handy here. 😉

[ddemaree]

N.B. - This is the same function signature as Next's static export, but values are props instead of Next routing objects, allowing the data that's generating the route map to also be passed into the components, to obviate the need for potentially dozens/hundreds of add'l API calls.

These routes are to be used in addition to the _routes.js file, so that an After site could render things dynamically in dev (or as a live preview environment for post drafts coming from an API), but statically in prod, or any mix of the two.

It would probably not be hard to have this function also pass in a component, and skip the routes table entirely. I personally would want to keep the routes file so that I can set up the preview environment thingy I mentioned, but it could work either way.

[Madsn]

What happened to this? Was it dropped?

[stevengrimaldo]

Would have been a really nice feature to tag with Razzle's export somehow.