Skip to content

Commit

Permalink
Merge pull request #853 from AlexsLemonade/arielsvn/844-server-side-r…
Browse files Browse the repository at this point in the history
…endering

Add server side rendering
  • Loading branch information
arielsvn committed Mar 4, 2020
2 parents 4939442 + 9b30ec3 commit 1c42c1d
Show file tree
Hide file tree
Showing 169 changed files with 6,111 additions and 5,687 deletions.
4 changes: 4 additions & 0 deletions .babelrc
@@ -0,0 +1,4 @@
{
"presets": ["next/babel"],
"plugins": []
}
1 change: 0 additions & 1 deletion .env

This file was deleted.

Empty file removed .env.development
Empty file.
11 changes: 4 additions & 7 deletions .eslintrc.js
@@ -1,11 +1,5 @@
module.exports = {
extends: [
'airbnb',
'react-app',
'prettier',
'prettier/react',
'prettier/flowtype',
],
extends: ['airbnb', 'prettier', 'prettier/react', 'prettier/flowtype'],
plugins: ['react-hooks'],
parser: 'babel-eslint',
env: {
Expand Down Expand Up @@ -37,6 +31,9 @@ module.exports = {
'no-unused-vars': 2,
'no-func-assign': 0,

// Nextjs forwards the Href tag automatically to `<a>` links
'jsx-a11y/anchor-is-valid': 0,

// Not sure if we should enforce these rules.
'class-methods-use-this': 0,
'react/prop-types': 0,
Expand Down
15 changes: 0 additions & 15 deletions .flowconfig

This file was deleted.

File renamed without changes.
5 changes: 4 additions & 1 deletion .gitignore
Expand Up @@ -8,6 +8,9 @@

# production
/build
/.next
/out
.now

# misc
.DS_Store
Expand All @@ -21,5 +24,5 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*

# vim
# vim
*.swp
82 changes: 35 additions & 47 deletions README.md
Expand Up @@ -2,22 +2,19 @@

[![forthebadge](https://forthebadge.com/images/badges/built-with-swag.svg)](https://forthebadge.com)

This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).

You can find the most recent version of the Create React App guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app) and later migrated to [NextJS](https://nextjs.org/)

## Table of Contents

* [Getting Started](#getting-started)
* [Development](#development)
* [Git Workflow](#git-workflow)
* [JavaScript](#javascript)
* [Framework](#framework)
* [Formatting](#formatting)
* [Static Type Checking](#static-type-checking)
* [Styling](#styling)
* [Executive Dashboard](#executive-dashboard)
* [Running Locally](#running-locally)
- [Getting Started](#getting-started)
- [Development](#development)
- [Git Workflow](#git-workflow)
- [JavaScript](#javascript)
- [Framework](#framework)
- [Formatting](#formatting)
- [Styling](#styling)
- [Executive Dashboard](#executive-dashboard)
- [Running Locally](#running-locally)

## Getting Started

Expand All @@ -39,33 +36,29 @@ In the project directory, run:

In the project directory, run:

#### `yarn start`
#### `yarn run dev`

* Runs the app in development mode
* Open http://localhost:3000 to view it in the browser
* Page will reload if you make any edits
* You will also see lint errors in the console
- Runs the app in development mode
- Open http://localhost:3000 to view it in the browser
- Page will reload if you make any edits
- You will also see lint errors in the console

### Production

#### `yarn run build`

* Builds the app for production to the `./build` folder
* Correctly bundles React in production mode and optimizes the build for the best performance
* Build is minified and filenames include hashes
- Prefetches the api version and other data required to run the app.
- Builds the app for production to the `./next` folder
- Correctly bundles React in production mode and optimizes the build for the best performance

#### Deployment
#### `yarn run start`

Deploys are triggered by git tags.
These git tags should correspond to a version of the project.
Once a tag has been pushed, it will trigger a new CircleCI build which will run the tests and then deploy the static files to S3 where they are served from.
A tag pushed to the `dev` branch will result in a new deploy to the staging enviroment while a tag pushed to the `master` branch will result in a new deploy to the prod environment.
A tag can be created and pushed with the following commands:
- Initializes the app in production mode
- Open http://localhost:3000 to view it in the browser

```
git tag -s vX.X.X -m "<RELEASE MESSAGE>"
git push origin vX.X.X
```
#### Deployment

Deploys are triggered automatically by pushing to the `master` or `dev` branches.

## Development

Expand All @@ -81,32 +74,27 @@ Merges into `master` happen at the end of sprints, and tags in master correspond

#### Framework

This project is using [React](https://reactjs.org/) as a frontend framework coupled with [Redux](https://redux.js.org/) for state management. Routing is being implemented with [React Router](https://github.com/ReactTraining/react-router).
This project is using [React](https://reactjs.org/) as a frontend framework coupled with [Redux](https://redux.js.org/) for state management.

Also it get's server rendered with [NextJS](https://nextjs.org/).

#### Formatting

We use [Prettier](https://prettier.io/), an opinionated code formatter, for JS code formatting. Whenever a commit is made, Prettier will automatically format the changed files. Prettier can also be [integrated](https://prettier.io/docs/en/editors.html) into many text editors.

#### Static Type Checking

We use [Flow](https://flow.org/) for static type checking.

Flow only checks files that include this annotation as the first line of the file:

`// @flow`

Run Flow via the command line with `yarn flow`.

### Styling

* Pre-processor: [SASS](https://sass-lang.com/)
* Write resuabled, modularized using [BEM](http://getbem.com/)
* Configured using [custom-react-scripts](https://github.com/kitze/custom-react-scripts) to avoid losing future creat-react-app support
- Pre-processor: [SASS](https://sass-lang.com/)
- Write resuabled, modularized using [BEM](http://getbem.com/)

## Executive Dashboard

Our executive dashboard is used for monitoring the health and state of our system. The dashboard can be viewed at the `/dashboard` route of the frontend.

### Running Locally
If you have the refine.bio backend running locally, just modify `proxy` in `package.json` to point to where your local backend is running.
## Running Locally

If you have the refine.bio backend running locally, just run the script with the variable `REACT_APP_API_HOST` pointing to the local API. For example:

```
REACT_APP_API_HOST=http://localhost:8000 yarn run dev
```
2 changes: 2 additions & 0 deletions integration/app.test.js
Expand Up @@ -41,6 +41,8 @@ describe('refine.bio integration tests', () => {

// navigate to first result
await expect(page).toClick('.result:nth-child(1) a');
await page.waitForSelector('.experiment');

await expect(page).toMatch('Submitter Supplied Information');
},
TIMEOUT
Expand Down
2 changes: 1 addition & 1 deletion integration/jest.config.js
@@ -1,4 +1,4 @@
module.exports = {
preset: 'jest-puppeteer',
testRegex: './*\\.test\\.js$',
}
};
8 changes: 4 additions & 4 deletions jest-puppeteer.config.js
Expand Up @@ -2,13 +2,13 @@ const PORT = 14568;

module.exports = {
launch: {
headless: process.env.CI === 'true'
headless: process.env.CI === 'true',
},
browserContext: process.env.INCOGNITO ? 'incognito' : 'default',
server: {
// run the tests against the production API
command: `REACT_APP_API_HOST=https://api.refine.bio BROWSER=none PORT=${PORT} yarn start`,
command: `REACT_APP_API_HOST=https://api.refine.bio yarn run dev --port ${PORT}`,
port: PORT,
launchTimeout: 10000
}
launchTimeout: 10000,
},
};
66 changes: 66 additions & 0 deletions next.config.js
@@ -0,0 +1,66 @@
const path = require('path');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});

const ApiHost = process.env.REACT_APP_API_HOST || 'https://api.refine.bio';

module.exports = withImages(
withSass(
withBundleAnalyzer({
target: 'serverless',
env: {
REACT_APP_API_HOST: ApiHost,
},
webpack: (config, { isServer, dev, webpack }) => {
// add custom webpack config only for the client side in production
if (!isServer && !dev) {
// ignore momentjs locales
config.plugins.push(
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
);

// lodash is referenced by multiple libraries, this makes sure we only
// inlcude it once
config.resolve.alias = {
...config.resolve.alias,
lodash: path.resolve(__dirname, 'node_modules/lodash'),
};

config.optimization.splitChunks = {
chunks: 'all',
cacheGroups: {
default: false,
vendors: false,
commons: {
name: 'commons',
chunks: 'all',
minChunks: 3,
},
charts: {
name: 'charts',
chunks: 'all',
test: /[\\/]node_modules[\\/](recharts|d3.*)[\\/]/,
enforce: true,
priority: 10,
},
// Only create one CSS file
styles: {
name: `styles`,
// This should cover all our types of CSS.
test: /\.(css|scss|sass)$/,
chunks: `all`,
enforce: true,
// this rule trumps all other rules because of the priority.
priority: 10,
},
},
};
}
return config;
},
})
)
);
35 changes: 19 additions & 16 deletions package.json
Expand Up @@ -6,12 +6,15 @@
"@sentry/browser": "^4.6.4",
"babel-eslint": "^10.0.1",
"classnames": "^2.2.6",
"delayed-scroll-restoration-polyfill": "^0.1.1",
"cross-env": "^7.0.0",
"formik": "^1.5.0",
"gsap": "^2.0.2",
"history": "^4.7.2",
"isomorphic-unfetch": "^3.0.0",
"lodash": "^4.17.14",
"moment": "^2.24.0",
"next": "^9.2.1",
"next-images": "^1.3.0",
"nprogress": "^0.2.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
Expand All @@ -20,15 +23,12 @@
"react-icons": "^3.7.0",
"react-modal": "^3.8.1",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-scripts": "3.0.1",
"react-table": "^6.9.1",
"react-use-visibility": "^0.2.0",
"recharts": "^1.4.2",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"shortid": "^2.2.14",
"smoothscroll-polyfill": "^0.4.3",
"yup": "^0.26.10"
},
"husky": {
Expand All @@ -46,20 +46,23 @@
]
},
"scripts": {
"analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"flow": "flow",
"eslint": "eslint src/",
"cacheBackend": "node cacheBackend.js",
"buildSitemap": "node sitemap.js",
"dev": "next",
"prebuild": "node cacheBackend.js && node sitemap.js",
"build": "next build",
"start": "next start",
"test": "jest --env=jsdom src/*",
"eslint": "eslint src/ pages/",
"analyze": "cross-env ANALYZE=true next build",
"analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
"test:integration": "jest --runInBand -c integration/jest.config.js"
},
"devDependencies": {
"@next/bundle-analyzer": "^9.2.2",
"@zeit/next-sass": "^1.0.1",
"@testing-library/react": "^8.0.1",
"axios": "^0.19.0",
"concurrently": "^5.1.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-babel": "^9.0.0",
Expand All @@ -69,14 +72,14 @@
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.13.0",
"eslint-plugin-react-hooks": "^1.6.0",
"flow-bin": "^0.68.0",
"husky": "^1.3.1",
"jest": "^25.1.0",
"jest-dom": "^3.4.0",
"jest-puppeteer": "^3.7.0",
"jest-puppeteer": "^4.4.0",
"lint-staged": "^7.0.0",
"node-sass": "^4.11.0",
"prettier": "^1.11.1",
"puppeteer": "^1.11.0",
"puppeteer": "^2.1.1",
"redux-mock-store": "^1.5.1",
"sitemap": "^4.1.1",
"source-map-explorer": "^1.6.0"
Expand Down
8 changes: 4 additions & 4 deletions src/pages/License.js → pages/License.js
@@ -1,11 +1,11 @@
import React from 'react';
import Helmet from 'react-helmet';
import Head from 'next/head';

const Privacy = () => (
<div className="terms">
<Helmet>
<div className="layout__content terms">
<Head>
<title>License - refine.bio</title>
</Helmet>
</Head>
<h1 className="terms__title">BSD 3-Clause License</h1>
<p>
Copyright &copy; 2017-2018, Greene Laboratory, University of Pennsylvania
Expand Down

0 comments on commit 1c42c1d

Please sign in to comment.