ACQ-NEXT-Landing

NextJS project for building fubo main landing pages for every market we support.

Dependency Setup

This project is using NPM not yarn. Run npm install to get dependencies.

Starting up local environment

npm run dev will start up a node server on localhost:3000

Environments

The environments are dependent on two runtime parameters NODE_ENV and BUILD_ENV.

NextJS requires NODE_ENV to be set to production to deploy and build out static sites, otherwise it will run a standard webpack server that supports hot reloading.

BUILD_ENV is our variable to point to different api backends just like frontend-web and where to pull image paths.

Node Version

Current Node Version .nvmrc

This file houses the current required version of the project. You can set up your shell to automagically switch to the correct node version provided you are using nvm. You can find more information about how to do this here.

Architecture and Patterns

Folder Structure

/pages

These are the main landing paths and entry points to a static page. These are the only components that can assess the server for api requests with getInitialProps and then pass down values to the client side rendered components.

/config

General environment setup goes here based on both NODE_ENV and BUILD_ENV.

/static

Static resources like images and icons should go here. Once deployed will be handled by Imgix for each environment.

/ci + /.circleci

Deployment scripts setting params for both circleci and docker images. Should be rarely modified.

/.next

NextJS framework library, should never need to modify anything here

/modules

Main app components and redux to be used together as building blocks for the pages.

Assessing Apis on the Server vs Client

This can only be done from the /pages folder

Server

use getInitialProps to do api calls on the server

  static async getInitialProps({ store }) {
    const state$ = new StateObservable(new Subject(), store.getState())
    const resultAction = await plansEpic(
      of(actions.startFetchingPlans()),
      state$,
    ).toPromise() // we need to convert Observable to Promise
    store.dispatch(resultAction)
  }

Client

trigger the same action on componentDidMount to hit the same api on the client

  componentDidMount() {
    console.log('mounted')
    this.props.startFetchingPlans()
  }

General Component Coding Pattern

This project is build completely using stateless components and hooks/effects. Where possible please continue this pattern. For reference https://reactjs.org/docs/hooks-intro.html

Opening a PR

Pull down master branch and branch off of it with initials-projectName-ticketNum

Deployment

Currently the project is small so there is only one branch master, once a PR is merged in it automatically builds to dev.

To trigger a QA build, you need to create a tag and then push that tag to the remote server.