abuffseagull / parcel-plugin-prerender Goto Github PK

If --public-url https://example.com is set so URLs use absolute paths (a requirement for og:image) then pre-rendering can't load any resources.

Or if the sites already published it will load the (old) live resources not the local resources.

I often have some definitive way to get a list of routes from my app, like an import that defines my router/menu/content in react, for example. If there is interest, I'd be happy to make a PR to dynamically create routes.

It would be cool if I could tell parcel-plugin-prerender to import some file in parcel-space, then get a list of routes in a promise-returning (so I can do async calls) function. Here is an example that uses parcel-plugin-markdown-string to import a bunch of markdown files with front-matter:

package.json:

{
  "prerender": {
   "dynamicRoutes": "src/dynamicRoutes.js",
    "rendererConfig": {
      "renderAfterDocumentEvent": "prerender-trigger"
    }
  }
}

src/dynamicRoutes.js:

import fm from 'front-matter'
import rawArticles from '../articles/*.md'

export const routes = async (builder) => {
  return Object.keys(rawArticles).map(name => {
    const article = fm(rawArticles[name])
    return `/${article.attributes.slug || name}`
  })
}

Currently, I can work around this by running a script to generate .prerenderrc before I do the build, but it'd be cool if it was integrated.

Docs says the configuration file should look like:

{
  "prerender": {
    "routes": ["/", "/about"],
    "rendererConfig": {
      "renderAfterDocumentEvent": "prerender-trigger"
    }
  }
}

but if I create a .prerenderrc like that it is not getting the routes array, instead it should look like:

{
    "routes": ["/", "/about"],
    "rendererConfig": {
      "renderAfterDocumentEvent": "prerender-trigger"
    }
}

I couldn't test if it works in the first way with a prerender.config.js it is giving me an error too.

I'm not sure if this is a bug or the docs are incorrect.

From the docs:

By default, this plugin will render the / path. As this plugin uses cosmiconfig, in order to add more paths, add an array of strings corresponding to the paths you want rendered in a routes key in your package.json, or a JSON or YAML .prerenderrc file, or export the key in a prerender.config.js file.

This sounds like the routes config property is optional. However if I don't have "routes": ["/"] set I get an error:

TypeError: Cannot read property 'map' of undefined

It would be great if unset routes was inferred as "routes": ["/"] by default.

I get this error:

TypeError: Cannot read property 'map' of undefined
    at PuppeteerRenderer.renderRoutes (/Users/konsumer/Desktop/parcel-ssr/node_modules/@prerenderer/renderer-puppeteer/es6/renderer.js:82:14)
    at Prerenderer.renderRoutes (/Users/konsumer/Desktop/parcel-ssr/node_modules/@prerenderer/prerenderer/es6/index.js:108:27)
    at Bundler.bundler.on (/Users/konsumer/Desktop/parcel-ssr/node_modules/parcel-plugin-prerender/index.js:24:48)
    at process._tickCallback (internal/process/next_tick.js:68:7)

with thisprerender.config.js:

module.exports = [
  '/',
  '/about',
  '/terms',
  '/features',
  '/stories',
  '/pricing'
]

I made this demo to illustrate the issue.

When parcel is launched with the option parcel build --public-url ./ in order to build for deployment outside the root of the server, static-rendered routes no longer reference their resources correctly.

For my directory structure

• build/
  • index.html
  • script_hash.js
  • myroute/
    • index.html

build/index.html will have a script tag that looks like:
<script src="script_hash.js"></script>
(Which is good)

BUT

build/myroute/index.html will also have a script tag which looks like:
<script src="script_hash.js"></script>
(Which will fail since the script is not in the same subdir)

The same applies to other resources (CSS, ico, etc.)

If I use the dynamic import (see here)
with the prerenderer the resulting script tags use absolute paths starting with http://localhost:8000

something like

import('./main').then(function(page) {
  // Render page
  page.render()
})

results in

<script async type="text/javascript" charset="utf-8" src="http://localhost:8000/main.5c28f114.js"></script>

I didn't find a way to force relative paths in parcel. Any ideas how I could solve this elegantly?
(atm. i use something like .replace('http://localhost:8000/','./')

Probably should add chalk back in and make it look better, like actual parcel, or the parcel-compress-plugin

I have no idea if this works with Parcel 2 yet, need to check.

Currently the testing doesn't work half the time, so it needs to be reworked to work every time.

I think it has to do with parcel being run from the command line, but I think it didn't respect plugins if you used the API.
Other things to look into would be deleting the .cache before each run, and running the tests sequentially.

would that be a good idea? I'm creating an static blog and I'm using this plugin, I thought it would be a good idea to add that flag to the configuration file.

For example I want to change some text on website, but I want it only when I prerender content and not run it in a runtime again.

Prerender works only if NODE_ENV set to production. Please add to the readme, I spent some time trying to figure it out.

Otherwise, first render is is being rendered without styles... and that’s not cool 👎.

I’ve seen that there is a tool called react-snap which already do that, I’ll have a look to it :-)

parcel build normally minifies the HTML.

If you pre-render the site, the markup generated by JavaScript may be quite verbose.

It would be good to run the HTML through a minifier like html-minifier after pre-rendering before writing it back to disk.