node package manager

funnel-fragment

Recipe Detail

This is the full repository for the recipe-detail microservice/BFF.

Before contributing to this repository, please view the contributing guidelines here.

Installation

Simply clone the repository and run npm install. If it hits you with some babel compilation errors, try: npm install --only=dev and then npm install --only=production.

This package comes with a couple of nice out of the box scripts that you can run, to run the backend server, there's two commands:

$ npm run server
$ npm run server:watch

They're pretty clear by itself, but I'll extend on how to use them in more detail later.

To compile the client files there's a couple of commands as well:

# To compile for different environments: 
 
$ npm run client:dev
$ npm run client:staging
$ npm run client:live
 
# To watch the dev files locally 
$ npm run client:watch

There's also a command to run both the server and the client, that one is:

$ npm run dev:universal

But for speedy development I recommend:

$ npm run dev:client

This one runs the webpack-dev-server with hot reloading configured.

Do mind that you should run the dev:universal command before deployment because the dev:client command doesn't include the server side rendering part.

Set up

There's one small configuration you can add to your development environment and that is local environment variables.

Example configuration in .env:

API_V2_TIMEOUT=10000
API_V2_URL=https://api-v2.hellofresh.com
API_V2_CLIENT_ID=senf
API_V2_CLIENT_SECRET=some-secret
 
TEST_COUNTRY=DE
TEST_USERNAME=test@hellofresh.com
TEST_PASSWORD=mypassword

Server

Most of the server logic is located in src/server, it includes an express server with a couple of simple endpoints, some to render the react app and one to render the base styles.

Debugging

The npm run server command is piped to bunyan, so you can for example do:

$ npm run server -- -l error

To show only the error logs, there is a basic principle in the server, which is. Log everything. So usually having some kind of filtering is nice, thanks Bunyan!

Error handling

We don't send errors to the client, ever! So no res.send(err.message)! There's a simple method hooked to the response, that can be called like this:

res.showMaintenance();

This will return a promise that will try to proxy the maintenance page from the main website. Otherwise it will return a simple 502 page.

Don't forget to emit your error though!

Events

You can always load the emitter through the createEmit helper from senf-api. Do mind that this is not being called in the client.

import { createEmit } from '@hellofresh/senf-api/lib/events';
import { EVENT_SOME_ERROR } from 'server/constants';
import { ERROR } from 'bunyan';
 
export const howToEmit = (emit = createEmit()) => {
    emit(EVENT_SOME_ERROR, { level: ERROR, err: new Error() });
};

Don't forget to add the level, otherwise it won't log to the error stream.