({
27 | query: welcomeQuery,
28 | variables: welcomeQueryVars,
29 | });
30 |
31 | if (welcomeResult.error) {
32 | return {`Error loading welcome message: ${welcomeResult.error}`}
;
33 | } else if (welcomeResult.fetching || !welcomeResult.data) {
34 | return Loading
;
35 | }
36 |
37 | const { welcome } = welcomeResult.data;
38 |
39 | return (
40 |
41 |
42 | {`Hello ${welcome.name}!`}
43 |
44 |
45 | );
46 | };
47 |
48 | export default Index;
49 |
--------------------------------------------------------------------------------
/packages/e2e/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | const ora = require('ora');
2 | const Promise = require('bluebird');
3 | const { GraphQLClient } = require('graphql-request');
4 |
5 | const queries = {
6 | welcomeQuery: `
7 | query ($name: String!) {
8 | welcome(name: $name) {
9 | name
10 | }
11 | }
12 | `,
13 | };
14 |
15 | const makeGraphRequest = (apiUrl, operation, variables, user) => {
16 | const opts = {};
17 |
18 | if (user && user.JWT) {
19 | opts.headers = {
20 | Authorization: `Bearer ${user.JWT}`,
21 | };
22 | }
23 |
24 | const client = new GraphQLClient(apiUrl, opts);
25 | return client.request(operation, variables);
26 | };
27 |
28 | const apiUrl = 'http://localhost:3000/api/graphql';
29 |
30 | const getWelcomeAsync = name => {
31 | return new Promise((resolve, reject) => {
32 | return makeGraphRequest(apiUrl, queries.welcomeQuery, {
33 | name,
34 | })
35 | .then(({ welcome }) => {
36 | if (welcome) {
37 | resolve(welcome);
38 | } else {
39 | reject(new Error('Could not load welcome message'));
40 | }
41 | })
42 | .catch(error => {
43 | reject(error);
44 | });
45 | });
46 | };
47 |
48 | module.exports = (on, config) => {
49 | on('task', {
50 | getWelcome(name) {
51 | const spinner = ora('Looking for welcome message').start();
52 | return getWelcomeAsync(name)
53 | .tap(() => {
54 | spinner.succeed('Found welcome message');
55 | })
56 | .tapCatch(err => {
57 | spinner.fail(err.message);
58 | });
59 | },
60 | });
61 | };
62 |
--------------------------------------------------------------------------------
/workflows/action-cypress/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:10
2 |
3 | LABEL repository="https://github.com/sync/reason-graphql-demo"
4 | LABEL homepage="http://github.com/sync"
5 | LABEL maintainer="sync@github.com>"
6 |
7 | LABEL com.github.actions.name="GitHub Action for cypress"
8 | LABEL com.github.actions.description="Wraps the yarn CLI to enable common yarn commands with extra stuff added for cypress."
9 | LABEL com.github.actions.icon="package"
10 | LABEL com.github.actions.color="brown"
11 |
12 | # "fake" dbus address to prevent errors
13 | # https://github.com/SeleniumHQ/docker-selenium/issues/87
14 | ENV DBUS_SESSION_BUS_ADDRESS=/dev/null
15 |
16 | # For Cypress
17 | ENV CI=1
18 |
19 | # https://github.com/GoogleChrome/puppeteer/blob/9de34499ef06386451c01b2662369c224502ebe7/docs/troubleshooting.md#running-puppeteer-in-docker
20 | RUN apt-get update && apt-get install -y wget --no-install-recommends \
21 | && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
22 | && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
23 | && apt-get update \
24 | && apt-get -y install procps git less openssh-client python-dev python-pip \
25 | && apt-get -y install libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 xvfb \
26 | && apt-get -y install curl groff jq zip libpng-dev \
27 | && apt-get install -y dbus-x11 google-chrome-unstable \
28 | --no-install-recommends
29 |
30 | RUN npm install -g yarn
31 | RUN npm install -g --unsafe-perm now
32 |
33 | # It's a good idea to use dumb-init to help prevent zombie chrome processes.
34 | ADD https://github.com/Yelp/dumb-init/releases/download/v1.2.0/dumb-init_1.2.0_amd64 /usr/local/bin/dumb-init
35 | RUN chmod +x /usr/local/bin/dumb-init
36 |
37 | COPY "entrypoint.sh" "/entrypoint.sh"
38 | ENTRYPOINT ["dumb-init", "--", "/entrypoint.sh"]
39 | CMD ["help"]
40 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: '@typescript-eslint/parser',
3 | parserOptions: {
4 | ecmaVersion: 2018,
5 | sourceType: 'module',
6 | },
7 | extends: [
8 | 'eslint:recommended',
9 | 'plugin:@typescript-eslint/recommended',
10 | 'prettier',
11 | 'prettier/react',
12 | 'prettier/@typescript-eslint',
13 | 'plugin:jest/recommended',
14 | 'plugin:cypress/recommended',
15 | ],
16 | plugins: ['jest', '@typescript-eslint', 'cypress'],
17 | env: {
18 | browser: true,
19 | node: true,
20 | es6: true,
21 | },
22 | settings: {
23 | react: {
24 | version: 'detect',
25 | },
26 | },
27 | overrides: [
28 | {
29 | files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
30 | rules: {
31 | '@typescript-eslint/no-undef': 'off',
32 | '@typescript-eslint/no-unused-vars': 'off',
33 | '@typescript-eslint/spaced-comment': 'off',
34 | '@typescript-eslint/no-restricted-globals': 'off',
35 | '@typescript-eslint/explicit-member-accessibility': 'off',
36 | '@typescript-eslint/explicit-function-return-type': 'off',
37 | '@typescript-eslint/camelcase': 'off',
38 | '@typescript-eslint/no-var-requires': 'off',
39 | '@typescript-eslint/class-name-casing': 'off',
40 | '@typescript-eslint/no-explicit-any': 'off',
41 | '@typescript-eslint/prefer-interface': 'off',
42 | '@typescript-eslint/no-non-null-assertion': 'off',
43 | },
44 | },
45 | {
46 | files: ['**/__tests__/**', '**/__mocks__/**'],
47 | globals: {
48 | mockData: true,
49 | },
50 | env: {
51 | jest: true,
52 | },
53 | },
54 | ],
55 | globals: {
56 | fetch: true,
57 | __DEV__: true,
58 | window: true,
59 | FormData: true,
60 | XMLHttpRequest: true,
61 | requestAnimationFrame: true,
62 | cancelAnimationFrame: true,
63 | page: true,
64 | browser: true,
65 | 'cypress/globals': true,
66 | },
67 | };
68 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const withTM = require('next-transpile-modules');
2 | const withOffline = require('next-offline');
3 | const withCSS = require('@zeit/next-css');
4 |
5 | const isDev = process.env.NODE_ENV !== 'production';
6 | const isProd = process.env.NODE_ENV === 'production';
7 | const disableServerless = Boolean(process.env.DISABLE_SERVERLESS);
8 |
9 | const baseTarget = disableServerless ? {} : { target: 'serverless' };
10 |
11 | const config = {
12 | env: {
13 | isDev,
14 | isProd,
15 | },
16 | ...baseTarget,
17 | crossOrigin: 'anonymous',
18 | webpack: config => {
19 | const rules = config.module.rules;
20 |
21 | // don't even ask my why
22 | config.node = {
23 | fs: 'empty',
24 | };
25 |
26 | // some react native library need this
27 | rules.push({
28 | test: /\.(gif|jpe?g|png|svg)$/,
29 | use: {
30 | loader: 'url-loader',
31 | options: {
32 | name: '[name].[ext]',
33 | },
34 | },
35 | });
36 | // .mjs before .js (fixing failing now.sh deploy)
37 | config.resolve.extensions = [
38 | '.wasm',
39 | '.mjs',
40 | '.web.js',
41 | '.web.jsx',
42 | '.ts',
43 | '.tsx',
44 | '.js',
45 | '.jsx',
46 | '.json',
47 | ];
48 |
49 | return config;
50 | },
51 | dontAutoRegisterSw: true,
52 | workboxOpts: {
53 | swDest: 'static/service-worker.js',
54 | runtimeCaching: [
55 | {
56 | urlPattern: /^https?.*/,
57 | handler: 'NetworkFirst',
58 | options: {
59 | cacheName: 'https-calls',
60 | networkTimeoutSeconds: 15,
61 | expiration: {
62 | maxEntries: 150,
63 | maxAgeSeconds: 30 * 24 * 60 * 60, // 1 month
64 | },
65 | cacheableResponse: {
66 | statuses: [0, 200],
67 | },
68 | },
69 | },
70 | ],
71 | },
72 | pageExtensions: ['jsx', 'js', 'web.js', 'web.jsx', 'ts', 'tsx'],
73 | };
74 |
75 | module.exports = withOffline(withCSS(withTM(config)));
76 |
--------------------------------------------------------------------------------
/src/helpers/withUrqlClient.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ssrPrepass from 'react-ssr-prepass';
3 | import { Client } from 'urql';
4 | import { AppContext } from 'next/app';
5 | import initUrqlClient from './initUrqlClient';
6 |
7 | export interface Props {
8 | urqlClient: Client;
9 | urqlState: any;
10 | baseUrl: string;
11 | }
12 |
13 | const withUrqlClient = (App: any) => {
14 | return class WithUrql extends React.Component {
15 | static async getInitialProps(appCtx: AppContext) {
16 | const {
17 | Component,
18 | router,
19 | ctx: { req },
20 | } = appCtx;
21 |
22 | // Run the wrapped component's getInitialProps function
23 | let appProps = {};
24 | if (App.getInitialProps) {
25 | appProps = await App.getInitialProps(appCtx);
26 | }
27 |
28 | // getInitialProps is universal, but we only want
29 | // to run server-side rendered suspense on the server
30 | const isBrowser = typeof window !== 'undefined';
31 | if (isBrowser) {
32 | return appProps;
33 | }
34 |
35 | function getBaseUrl(req) {
36 | const protocol = req.headers['x-forwarded-proto'] || 'http';
37 | const host = req.headers['x-forwarded-host'] || req.headers.host;
38 | return `${protocol}://${host}`;
39 | }
40 |
41 | const baseUrl = req ? getBaseUrl(req) : '';
42 |
43 | const [urqlClient, ssrCache] = initUrqlClient(baseUrl);
44 |
45 | // Run suspense and hence all urql queries
46 | await ssrPrepass(
47 | ,
53 | );
54 |
55 | // Extract the SSR query data from urql's SSR cache
56 | const urqlState = ssrCache.extractData();
57 |
58 | return {
59 | ...appProps,
60 | baseUrl,
61 | urqlState,
62 | };
63 | }
64 |
65 | urqlClient: Client | null;
66 |
67 | constructor(props: Props) {
68 | super(props);
69 |
70 | if (props.urqlClient) {
71 | this.urqlClient = props.urqlClient;
72 | } else {
73 | // Create the urql client and rehydrate the prefetched data
74 | const [urqlClient] = initUrqlClient(props.baseUrl, props.urqlState);
75 | this.urqlClient = urqlClient;
76 | }
77 | }
78 |
79 | render() {
80 | return ;
81 | }
82 | };
83 | };
84 |
85 | export default withUrqlClient;
86 |
--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import Document, { Head, Main, NextScript } from 'next/document';
2 | import React from 'react';
3 |
4 | const serviceWorkerRegistration = `
5 | document.addEventListener('DOMContentLoaded', event => {
6 | if ('serviceWorker' in navigator) {
7 | window.addEventListener('load', () => {
8 | navigator.serviceWorker.register('/service-worker.js', { scope: "/" }).then(registration => {
9 | console.log('SW registered: ', registration)
10 | }).catch(registrationError => {
11 | console.log('SW registration failed: ', registrationError)
12 | })
13 | })
14 | }
15 | })
16 | `;
17 |
18 | export default class MyDocument extends Document {
19 | static getInitialProps({ renderPage }) {
20 | const page = renderPage();
21 |
22 | const styles = [
23 | ,
33 | ];
34 |
35 | return { ...page, styles: React.Children.toArray(styles) };
36 | }
37 |
38 | render() {
39 | return (
40 |
41 |
42 |
43 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | {process.env.isProd && (
54 | <>
55 |
60 |
66 |
72 |
73 |
74 | )}
75 |
76 |
77 |
78 |
79 |
80 |
81 | {process.env.isProd && (
82 |
86 | )}
87 |
88 |
89 | );
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## next-level
2 |
3 | [View the application](https://next-level.now.sh/)
4 |
5 | Ultra high performance progressive web application built with React and Next.js.
6 |
7 | [](https://github.com/ebidel/lighthouse-badge)
8 | [](https://github.com/ebidel/lighthouse-badge)
9 | [](https://github.com/ebidel/lighthouse-badge)
10 | [](https://github.com/ebidel/lighthouse-badge)
11 | [](https://github.com/ebidel/lighthouse-badge)
12 |
13 | [](https://percy.io/Dblechoc/next-level)
14 |
15 | ## Features
16 |
17 | - Progressive web app
18 | - offline
19 | - install prompts on supported platforms
20 | - Server side rendering
21 | - Next.js 9.x (canary)
22 | - Webpack 4.x
23 | - Babel 7.x
24 | - Now.sh 2.x
25 | - Yarn (monorepo with workspaces)
26 |
27 | ## Things to know
28 |
29 | - A production build is deployed from a merge to master
30 | - A staging build is deployed from a PR against master
31 |
32 | ## Setting up the project locally
33 |
34 | First of all make sure you are using node `10.15.3` (any node 10.x would also do) and latest yarn, you can always have a look at the `engines` section of the `package.json`. Why node 8.10. We are using Now.sh to make the app available online and underneath it's using AWS lambda and you have to use Node 8.
35 |
36 | ```sh
37 | $ yarn (install)
38 | $ yarn dev
39 | ```
40 |
41 | After doing this, you'll have a server with hot-reloading running at [http://localhost:3000](http://localhost:3000).
42 |
43 | ## Run tests and friends
44 |
45 | We don't want to use snapshots, we use also use [react-testing-library](https://github.com/testing-library/react-testing-library) to avoid having to use enzyme and to enforce best test practices.
46 |
47 | ```sh
48 | $ yarn format
49 | $ yarn typecheck
50 | $ yarn lint
51 | $ yarn test
52 | ```
53 |
54 | or
55 |
56 | ```sh
57 | $ yarn ci
58 | ```
59 |
60 | ## End to end tests
61 |
62 | We use cypress. Please check `e2e` for more details.
63 | If you wan to add a new test use the following command and wait for cypress to open
64 |
65 | ```
66 | yarn e2e-build
67 | yarn start
68 | yarn workspace @dblechoc/e2e cypress open
69 | ```
70 |
71 | ## Storybook
72 |
73 | This is where we list all our components (comes with hot reloading)
74 |
75 | ```sh
76 | $ yarn storybook
77 | ```
78 |
79 | After doing this, you'll have a showcase page running at [http://localhost:6006](http://localhost:6006)
80 |
81 | ## CI
82 |
83 | We are using [Github Actions](https://help.github.com/en/articles/about-github-actions).
84 |
85 | ## Next maintenance
86 |
87 | All the documenation is located here: [https://nextjs.org/docs/#setup](https://nextjs.org/docs/#setup)
88 |
89 | ## Now maintenance
90 |
91 | All the documentation is located here: [https://zeit.co/docs](https://zeit.co/docs)
92 |
93 | ```sh
94 | # Install
95 | $ curl -sfLS https://zeit.co/download.sh | sh
96 | ```
97 |
98 | ### Useful commands
99 |
100 | ```sh
101 | # check all running instances
102 | $ now ls
103 |
104 | # check logs for a given instance
105 | $ now logs your-app.now.sh --all
106 |
107 | # check all alias (running instances to your-app.now.sh)
108 | $ now alias ls
109 | ```
110 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "next-level",
3 | "license": "ISC",
4 | "private": true,
5 | "version": "1.0.0",
6 | "engines": {
7 | "node": "10.x"
8 | },
9 | "workspaces": {
10 | "packages": [
11 | "packages/*"
12 | ]
13 | },
14 | "scripts": {
15 | "dev": "next dev",
16 | "build": "next build",
17 | "start": "DISABLE_SERVERLESS=true NODE_ENV=production next start",
18 | "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md,html}\"",
19 | "lint": "eslint '**/*.js{,x}' '**/*.ts{,x}'",
20 | "typecheck": "tsc --noEmit",
21 | "test": "NODE_ENV=test jest",
22 | "test-watch": "NODE_ENV=test jest -o --watch",
23 | "ci": "yarn typecheck && yarn lint && yarn test",
24 | "storybook": "start-storybook -p 6006",
25 | "build-storybook": "build-storybook",
26 | "snapshot-ui": "build-storybook && percy-storybook --widths=320,1280",
27 | "e2e-build": "DISABLE_SERVERLESS=true yarn build",
28 | "e2e-run": "yarn --cwd packages/e2e e2e",
29 | "e2e": "yarn e2e-build && start-server-and-test start 3000 e2e-run",
30 | "deploy": "scripts/deploy-ci.sh",
31 | "deploy:production": "now --token $NOW_TOKEN --target production",
32 | "deploy:staging": "now --token $NOW_TOKEN --target staging"
33 | },
34 | "dependencies": {
35 | "apollo-server-micro": "2.9.15",
36 | "graphql": "14.5.8",
37 | "graphql-tag": "2.10.1",
38 | "isomorphic-fetch": "2.2.1",
39 | "next": "9.1.7",
40 | "react": "16.12.0",
41 | "react-dom": "16.12.0",
42 | "react-is": "16.12.0",
43 | "react-ssr-prepass": "1.0.8",
44 | "urql": "1.7.0"
45 | },
46 | "devDependencies": {
47 | "@babel/core": "7.7.7",
48 | "@babel/plugin-proposal-class-properties": "7.7.4",
49 | "@babel/plugin-proposal-object-rest-spread": "7.7.7",
50 | "@fullhuman/postcss-purgecss": "1.3.0",
51 | "@percy-io/percy-storybook": "2.1.0",
52 | "@storybook/addon-actions": "5.2.8",
53 | "@storybook/addon-centered": "5.2.8",
54 | "@storybook/addon-links": "5.2.8",
55 | "@storybook/addon-viewport": "5.2.8",
56 | "@storybook/addons": "5.2.8",
57 | "@storybook/react": "5.2.8",
58 | "@testing-library/jest-dom": "4.2.4",
59 | "@testing-library/react": "9.4.0",
60 | "@types/isomorphic-fetch": "0.0.35",
61 | "@types/jest": "24.0.25",
62 | "@types/react": "16.9.17",
63 | "@typescript-eslint/eslint-plugin": "2.15.0",
64 | "@typescript-eslint/parser": "2.15.0",
65 | "@zeit/next-css": "1.0.1",
66 | "autoprefixer": "9.7.3",
67 | "awesome-typescript-loader": "5.2.1",
68 | "babel-loader": "8.0.6",
69 | "eslint": "6.8.0",
70 | "eslint-config-prettier": "6.9.0",
71 | "eslint-plugin-cypress": "2.8.1",
72 | "eslint-plugin-jest": "23.3.0",
73 | "eslint-plugin-react": "7.17.0",
74 | "husky": "4.0.1",
75 | "identity-obj-proxy": "3.0.0",
76 | "jest": "24.9.0",
77 | "jest-canvas-mock": "2.2.0",
78 | "jest-fetch-mock": "3.0.1",
79 | "jest-mock-console": "1.0.0",
80 | "lint-staged": "9.5.0",
81 | "next-offline": "4.0.6",
82 | "next-transpile-modules": "2.3.1",
83 | "prettier": "1.19.1",
84 | "start-server-and-test": "1.10.6",
85 | "styled-components": "4.4.1",
86 | "tailwindcss": "1.1.4",
87 | "typescript": "3.7.4",
88 | "webpack": "4.41.5"
89 | },
90 | "prettier": {
91 | "singleQuote": true,
92 | "trailingComma": "all",
93 | "bracketSpacing": true
94 | },
95 | "lint-staged": {
96 | "*.{ts,tsx,js,jsx,json,css,md,html}": [
97 | "prettier --write",
98 | "git add"
99 | ]
100 | },
101 | "husky": {
102 | "hooks": {
103 | "pre-commit": "lint-staged",
104 | "pre-push": "yarn lint",
105 | "post-commit": "git update-index -g"
106 | }
107 | }
108 | }
109 |
--------------------------------------------------------------------------------