guestline-scripts

guestline-scripts

This package includes a set of scripts that makes configuring a project easier. It uses the eslint-config-guestline. It includes built in test runner.

Folder Structure

|_ build
|_ src
| |_ client
| |_ server
|_ .env
|_ .gitignore
|_ package.json

ESLint

If you want to see the linting in your IDE, create a file named .eslintrc with following contents in the root folder of your project:

{
  "extends": "guestline"
}

That's it!

However, if you are using Guestline Scripts, any additional rules will only be displayed in the IDE, but not in the browser or the terminal.

Tests using Jest

We are running tests using Jest. All documentation can be found here.

To run tests, add a new script in your package.json:

{
  "scripts": {
    "test": "guestline-scripts test --env=jsdom"
  }
}

Remove --env=jsdom if you do not run tests that need a document - e.g. node tests.

Watch mode

By default running tests runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called CI.

Popular CI servers already set the environment variable CI by default but you can do this yourself too:

Windows (cmd.exe)

set CI=true&&npm test

(Note: the lack of whitespace is intentional.)

Windows (Powershell)

($env:CI = $true) -and (npm test)

Linux, macOS (Bash)

CI=true npm test

Initializing Test Environment

If your app uses a browser API that you need to mock in your tests or if you just need a global setup before running your tests, add a src/setupTests.js to your project. It will be automatically executed before running your tests.

For example:

const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn()
};
global.localStorage = localStorageMock;

NextJS

You can run your Next.js application using our simplified scripts. It's super easy to setup:

1 - Install Next.js

npm i -S next

yarn add next

2 - Create the folder structure

This is in the src/client that your pages folder will be located.

3 - Create your server

Create your server.js in the src folder:

const path = require('path');
const next = require('next');
const express = require('express');

const nextApp = next({
  dev: process.env.NODE_ENV !== 'production'
  dir: path.join(__dirname, 'client'),
  conf: require('guestline-scripts/next/config')
});
const handle = nextApp.getRequestHandler();

nextApp.prepare().then(() => {
  const app = express();

  app.set('port', parseInt(process.env.PORT, 10) || 2000);

  app.get('*', (req, res) => {
    return handle(req, res);
  });

  app.listen(app.get('port'), err => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${app.get('port')}`);
  });
});

4 - create your scripts commands

"scripts": {
  "build": "guestline-scripts build",
  "start": "guestline-scripts start",
  "start:prod": "cross-env NODE_ENV=production guestline-scripts start"
}

5 - Options

Customize the port

Customize the port your application will be running on by declaring a PORT variable:

PORT=3001 guestline-scripts start

Use your own config

You can use your own config or extend ours by creating a src/client/next.config.js file. This file should follow the Next.js documentation.

Remember to use your own config in your server.js too.