Druid-kyt-starter NPM

Druid starter-kyt

This starter-kyt should serve as the base for Druid React apps. This was copied from starter-kyt-universal.

Installation

First, you need kyt-cli:

npm install -g kyt-cli

For information about installing software globally using NPM without sudo, see this guide.

To setup a project, clone this repository and run the following

kyt-cli setup -r /path/to/this-repo/packages/druid-kyt-starter

kyt-cli may prompts to optionally create a project directory. If you already have a project directory, it can initialize the starter kyt into the current directory.

Using Apollo

To use Apollo,

1. Add `druid-kyt-apollo` to your `package.json`

I.e. yarn install druid-kyt-apollo

2. Provide, extract and export Apollo state in `src/server/index.js`

In src/server/index.js, implement the following changes:

import { renderToStringWithApollo } from 'druid-kyt-apollo';

// ...

// Instead of renderToString, do the following (notice the await!)
const { renderedHtml, apolloState } = await renderToStringWithApollo(
  druidKytConfiguration.apollo,
  root,
);

// Then, add __APOLLO_STATE__ to the list of strings to be exported.
windowPropertiesJSON: JSON.stringify({
  __INITIAL_STATE__: reduxStore.getState(),
  __APOLLO_STATE__: apolloState,
}),

3. Provide Apollo state in `src/client/index.js`

In src/client/index.js, implement the following changes:

import { ClientSideApolloProvider } from 'druid-kyt-apollo';

// ...

// Wrap AppContainer in <ClientSideApolloProvider>, like this:

<ClientSideApolloProvider
  apolloConfiguration={druidKytConfiguration.apollo}
  initialState={window.__APOLLO_STATE__}
>
  <AppContainer>
    <BrowserRouter>
      <AppComponent reduxStore={reduxStore} />
    </BrowserRouter>
  </AppContainer>
</ClientSideApolloProvider>,

4. Configure Apollo in `project-kyt.config.js`:

apollo: {
  link: { // These parameters will be passed directly to HttpLink(...)
    uri: 'https://localhost/graphql',
  },
  cache: {
    // These parameters will be passed directly to InMemoryCache(...)
  },
},

Tools

The following are some of the tools included in this starter-kyt:

Express - Server-side rendering
React - Component library
React Router - Server and client routing
Sass Modules - CSS Modules with a Sass pre-processor for styles
Enzyme - React component testing

Notes on implementation

As a performance optimization, React Router routes are loaded dynamically and chunked separately using the ES2015 import() directive. See more about Webpack 2 support and dynamic routing.

Directory structure (src/)

assets/: E.g. logos can be put here. These will not be copied to webroot unless they are used.
client/: Initialization code specific to the browser-side part.
components/: Components that are shared between routes. For route-specific components, add them to routes/
public/: These files will be copied to webroot directly.
routes/: Routes and route-specific components.
server/: Initialization and server code specific to the server-side part.
styles/: SASS styles common to the whole application. Component-specific styles may be added in components.