@noths/storefront

Storefront

Storefront is a library to help rendering storefronts.

It is full SSR (server side rendering) "compliant" as it does work without having client side interfaces like window or document, either in the source code or in the build process, because we don't rely on any bundler like webpack for distributing the server-side code of the library. We only use it for development purposes and distributing the client side bundle.

This library was extracted from noths-storefront service. We maintained all the logic with new and updated dependencies. You can read more about it here.

How to start development with hot reload

Execute the commands below to start a development server.

npm i
npm run start

Now visit http://localhost:8080

It uses the files under the build-dev folder to serve a development version of it with mocked data.

How to prepare the library for server side usage and client side hydration

npm run build

The following will be available in the ./dist folder:

• entire source code transpiled with babel so it can safely be used as a common-js module in a node js environment

• entire source code worked and packed with webpack in the app.js

• the assets like png's

• the stylesheets from the app and styles-toolkit

How to publish the library

You'll need to register on npm by running npm adduser. If you're already registered on npm, use npm login instead.

In order to publish:

• the version bump should be part of the pull request

• after a successful merged pull request you will have to:

npm publish

How to use the library while doing server side rendering

npm i @noths/storefront

import { prepare } from '@noths/storefront'
// data as in the content that was fetched from the s3 bucket populated by https://github.com/notonthehighstreet/partner-content
const dataContainer = prepare(data)
// you can also use other functions from ReactDOMServer
// the resulting container should embeded in an html document
// for more info look at the example in https://notonthehighstreet.atlassian.net/wiki/spaces/T8B/pages/758349860/Storefront-frontend
ReactDOMServer.renderToString(dataContainer)

We can also see a working example in the index.js under ./build-dev folder.

How to use the library while doing client side rendering

• declare the dependencies like app.js and stylesheets in the html file

Unit tests

npm run test

Tests with coverage

npm run test:coverage