├── .babelrc
├── .github
├── stale.yml
└── workflows
│ └── add-to-project.yml
├── .gitignore
├── .npmignore
├── README.md
├── index.js
├── package-lock.json
├── package.json
└── src
├── index.js
├── unleash-context.js
├── with-unleash-provider.js
└── with-unleash.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/env",
4 | "minify"
5 | ],
6 | "plugins": [
7 | "@babel/plugin-transform-react-jsx",
8 | "@babel/plugin-proposal-object-rest-spread",
9 | "@babel/plugin-proposal-class-properties",
10 | "@babel/plugin-transform-runtime"
11 | ]
12 | }
--------------------------------------------------------------------------------
/.github/stale.yml:
--------------------------------------------------------------------------------
1 | _extends: .github
2 |
--------------------------------------------------------------------------------
/.github/workflows/add-to-project.yml:
--------------------------------------------------------------------------------
1 | name: Add new item to project board
2 |
3 | on:
4 | issues:
5 | types:
6 | - opened
7 | pull_request_target:
8 | types:
9 | - opened
10 |
11 | jobs:
12 | add-to-project:
13 | uses: unleash/.github/.github/workflows/add-item-to-project.yml@main
14 | secrets: inherit
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # TypeScript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
60 | # next.js build output
61 | .next
62 |
63 | dist
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | .babelrc
3 | !dist
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | > ## This repo is being deprecated, use [`@unleash/nextjs` package](https://www.npmjs.com/package/@unleash/nextjs)
2 |
3 | # next-unleash
4 | The goal of this module is to make it easy to use Unleash with next.js.
5 |
6 | The main motivation is to make sure toggles are available both during Server-Side-Rendering (SSR)
7 | and during local page transitions.
8 |
9 | The general idea is that Unleash Node.js SDK is used at the server side, and that all toggles are
10 | propagated as part of SSR.
11 |
12 | **This project is considered a POC. APIs and components might change**
13 |
14 | ## Not solved yet:
15 | - Client side update of toggles. We should use SSE or similar to update the client toggles when changes are detected. Currently these changes are only picket up during reload (SSR).
16 | - A wrapper component. It would provably be easier to use if there where some kind of react component you could use to wrap your components.
17 | - Figure out if there are ways to configure the middleware with next.js so that users don't have to introduce custom server.
18 | - Make it easy to configure toggles you care about in the app.
19 |
20 |
21 | ## How to use
22 |
23 | ### Step 1: Express middleware setup
24 |
25 | First you will need to configure a [custom-server](https://github.com/zeit/next.js/tree/canary/examples/custom-server-express) with next.js in order to make the toggles available during SSR.
26 |
27 | ```javascript
28 | //server.js
29 |
30 | const express = require('express');
31 | const next = require('next');
32 |
33 | const port = parseInt(process.env.PORT, 10) || 3000;
34 | const dev = process.env.NODE_ENV !== 'production';
35 | const app = next({ dev });
36 | const { initialize, isEnabled } = require('unleash-client');
37 | const handle = app.getRequestHandler();
38 |
39 | initialize({
40 | url: 'https://unleash.herokuapp.com/api/',
41 | appName: 'next-unleash-demo',
42 | });
43 |
44 | app.prepare().then(() => {
45 | const server = express()
46 |
47 | //Unleash middleware
48 | server.use((req, res, nextCall) => {
49 | req.toggles = {
50 | newPriceModel: isEnabled('unleash-x.newPriceModel'),
51 | reducesRiskLink: isEnabled('landing.reducesRiskLink'),
52 | betaKillSwitch: isEnabled('landing.betaKillSwitch')
53 | };
54 | nextCall();
55 | });
56 |
57 | server.get('*', (req, res) => {
58 | return handle(req, res)
59 | })
60 |
61 | server.listen(port, err => {
62 | if (err) throw err
63 | console.log(`> Ready on http://localhost:${port}`)
64 | })
65 | })
66 | ```
67 |
68 |
69 | ### Step 2: Wrap App with the Unleash provider
70 |
71 | You will need to wrap your `App` component with the unleash-provider.
72 |
73 | ```javascript
74 | //_app.js
75 |
76 | import React from 'react';
77 | import App, { Container } from 'next/app';
78 | import Head from 'next/head';
79 | import Router from 'next/router';
80 |
81 | import JssProvider from 'react-jss/lib/JssProvider';
82 | import getPageContext from '../src/getPageContext';
83 |
84 | import { withUnleashProvider } from 'next-unleash';
85 |
86 | class MyApp extends App {
87 | constructor(props) {
88 | super(props);
89 | this.pageContext = getPageContext();
90 | }
91 |
92 | componentDidMount() {
93 | // Remove the server-side injected CSS.
94 | const jssStyles = document.querySelector('#jss-server-side');
95 | if (jssStyles && jssStyles.parentNode) {
96 | jssStyles.parentNode.removeChild(jssStyles);
97 | }
98 | }
99 |
100 | render() {
101 | const { Component, pageProps } = this.props;
102 | return (
103 |
104 |
105 | My app
106 |
107 |
108 |
109 | );
110 | }
111 | }
112 |
113 | // Wrap the entire app with the unleash provider
114 | export default withUnleashProvider(MyApp);
115 | ```
116 |
117 | ### Step 3: Access toggles in component
118 |
119 | When you want to access Unleash feature toggles in a component you can wrap the component using `withUnleash`:
120 |
121 | ```javascript
122 | import withUnleash from 'next-unleash';
123 |
124 | import React from 'react';
125 | import PropTypes from 'prop-types';
126 | import { withUnleash } from './unleash/withUnleash';
127 |
128 | class MyComponent extends React.Component {
129 |
130 | render() {
131 | const { toggles } = this.props;
132 |
133 | return (
134 |
135 | {toggles.demo ?
Enabled
:
disabled
}
136 |