Express server for properly rendering HTML metadata on React sites when scraped/shared. Since React requires JS to execute in order to manipulate the DOM, page content and HTML metadata often looks different when viewed in a browser vs when scraped/shared. Likewise, client routes created via the History pushState API are client-side only and will return Not Found when requested to the server. The MetaServer attempts to ensure that shared/scraped links render the HTML just as it would be rendered when viewed in the browser. This is accomplished by intercepting route requests and rendering the HTML in headless Chrome then returning the resultant HTML instead of the typical React-hosting flow of just redirecting to the root of the site.
The package should be installed under dependencies (not under devDependencies) as the server will be used for hosting & running the React App.
Using npm:
npm i --save @xylabs/meta-serverUsing yarn:
yarn add @xylabs/meta-serverThe build output can be hosted/served via the MetaServer by running the included script. Configuration is available via
npm run start-meta
yarn start-meta
You can configure the root directory from which your app is served via the ENV VAR SERVE_DIRECTORY which defaults to './build' if not supplied
To allow for containerized deployment the included script docker-build is provided which creates a production build of the app and outputs a container with the Meta Server which proxies the built app.
- Add
xy.config.jsonto the root of your build output (see sample below)
Sample xy.config.json
{
liveShare: {
exclude: ['/exclude/*'],
include: ['/live-share-route/*'],
},
}
For LiveShare routes, pages are required to provide a meta tag with the property xyo:og:image with a content attribute that contains the URL of the preferred route for rendering the preview. The URL specified for the preview must be valid and lead to a route where an element with the ID 'preview-container' is present. The MetaServer wil:
- render the page rendered
- read the
xyo:og:imageattribute - navigate to the URL provided in the
xyo:og:imageattribue - wait for the DOM to contain an element with the ID
preview-container - snapshot the page and cache the image
- update the document head to point to the
og:image(and associated properties like height/width) to point to the cached snapshot
See the LICENSE file for license details