const HtmlWebpackPlugin = require('html-webpack-plugin')

const buildOutputPath = '...'
const devServerPort = 8080 // Any port number.

module.exports = {
  output: {
    path: buildOutputPath,
    publicPath: `http://localhost:${devServerPort}`,
    ...
  },
  ...,
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html' // Path to `index.html` file.
    }),
    ...
  ],
  devServer: {
    port: devServerPort,
    contentBase: buildOutputPath,
    historyApiFallback : true
  }
}

import webpageServer from 'react-pages/server'
import settings from './react-pages'

// Create webpage rendering server
const server = webpageServer(settings, {
  // Pass `secure: true` flag to listen on `https://` rather than `http://`.
  // secure: true,

  // These are the URLs of the "static" javascript and CSS files
  // which are injected into the resulting HTML webpage in the form of
  // <script src="..."/> and <link rel="style" href="..."/> tags.
  //
  // The javascript file should be the javascript "bundle" of the website
  // and the CSS file should be the CSS "bundle" of the website.
  //
  // P.S.: To inject other types of javascript or CSS files
  // (for example, files of 3rd-party libraries),
  // use a separate configuration parameter called `html`:
  // https://gitlab.com/catamphetamine/react-pages/blob/master/README-ADVANCED.md#all-webpage-rendering-server-options)
  //
  assets() {
    return {
      // This should be the URL for the application's javascript bundle.
      // In this case, the configuration assumes that the website is being run
      // on `localhost` domain with "static file hosting" enabled for its files.
      javascript: 'http://localhost:8080/bundle.js',

      // (optional)
      // This should be the URL for the application's CSS bundle.
      style: 'http://localhost:8080/bundle.css'
    }
  }
})

// Start webpage rendering server on port 3000.
// Syntax: `server.listen(port, [host], [callback])`.
server.listen(3000, function(error) {
  if (error) {
    throw error
  }
  console.log(`Webpage rendering server is listening at http://localhost:3000`)
})

{
  onLoadError: (error, { location, url, redirect, useSelector, server }) => {
    redirect(`/error?url=${encodeURIComponent(url)}&error=${error.status}`)
  }
}

UserPage.load = async ({ params }) => {
  const user = await fetch(`/api/users/${params.id}`)
  if (user.wasDeleted) {
    return {
      redirect: {
        url: '/not-found'
      }
    }
  }
  return {
    props: {
      user
    }
  }
}

{
  path: '/old-path/:id',
  permanentRedirectTo: '/new-path/:id'
}

import { useLoading } from 'react-pages'
import LoadingIndicator from './LoadingIndicator.js'

export default function PageLoading() {
  const isLoading = useLoading()
  return (
    <LoadingIndicator show={isLoading}/>
  )
}

export default function App({ children }) {
  return (
    <div>
      <PageLoading/>
      {children}
    </div>
  )
}

import React from 'react'
import { useSelector } from 'react-redux'
import { Link } from 'react-pages'

function SearchResultsPage() {
  const results = useSelector(state => state.searchPage.results)
  return (
    <ul>
      { results.map((item) => (
        <li>
          <Link to="/items/{item.id}" instantBack>
            {item.name}
          </Link>
        </li>
      ))) }
    </ul>
  )
}

SearchResultsPage.load = async () => await fetchSomeData()

import { useNavigationStartEffect, isInstantBackAbleNavigation } from 'react-pages'

function Page() {
  useNavigationStartEffect(() => {
    if (isInstantBackAbleNavigation()) {
      // Save the current page state.
    }
  })
}

import { ReduxModule } from 'react-pages'

const redux = new ReduxModule('BLOG_POST')

// Post comment Redux "action creator"
export const postComment = redux.action(
  // 'POST_COMMENT',
  (userId, blogPostId, commentText) => async http => {
    // The original action call looks like:
    // `dispatch(postComment(1, 12345, 'bump'))`
    return await http.post(`/blog/posts/${blogPostId}/comment`, {
      userId: userId,
      text: commentText
    })
  }
)

// Get comments Redux "action creator"
export const getComments = redux.action(
  // 'GET_COMMENTS',
  (blogPostId) => async http => {
    return await http.get(`/blog/posts/${blogPostId}/comments`)
  },
  // The fetched comments will be placed
  // into the `comments` Redux state property.
  'comments'
  //
  // Or write it like this:
  // { comments: result => result }
  //
  // Or write it as a Redux reducer:
  // (state, result) => ({ ...state, comments: result })
)

// A developer can listen to any Redux event via
// `redux.on('EVENT_NAME', (state, action) => state)`.
//
// In this case, it listens to a "success" event of a `redux.action()`.
// There's a section in this document describing this feature in more detail:
// "Redux module can also listen for events from other redux modules via <code>redux.on()</code>"
//
redux.on('BLOG_POST', 'CUSTOM_EVENT', (state, action) => ({
  ...state,
  reduxStateProperty: action.value
}))

// This is the Redux reducer which now
// handles the asynchronous actions defined above
// (and also the `handler.on()` events).
// Export it as part of the "main" reducer.
export default redux.reducer()

// The "main" reducer is composed of various reducers.
export { default as blogPost } from './blogPost'
...

import React from 'react'
import { getBlogPost, getComments, postComment } from './redux/blogPost'

export default function BlogPostPage() {
  const userId = useSelector(state => state.user.id)
  const blogPost = useSelector(state => state.blogPost.blogPost)
  const comments = useSelector(state => state.blogPost.comments)
  return (
    <div>
      <article>
        { blogPost.text }
      </article>
      <ul>
        { comments.map(comment => <li>{comment}</li>) }
      </ul>
      <button onClick={() => postComment(userId, blogPost.id, 'text')}>
        Post comment
      </button>
    </div>
  )
}

// Load blog post and comments before showing the page
// (see "Page loading" section of this document)
BlogPostPage.load = async ({ dispatch, params }) => {
  // `params` are the URL parameters in route `path`.
  // For example, "/blog/:blogPostId".
  await dispatch(getBlogPost(params.blogPostId))
  await dispatch(getComments(params.blogPostId))
}

action = redux.simpleAction((state, actionArgument) => newState)

import { ReduxModule } from 'react-pages'

const redux = new ReduxModule('NOTIFICATIONS')

// Displays a notification.
//
// The Redux "action" creator is gonna be:
//
// function(text) {
//   return {
//     type    : 'NOTIFICATIONS:NOTIFY',
//     message : formatMessage(text)
//   }
// }
//
// And the corresponding reducer is gonna be:
//
// case 'NOTIFICATIONS:NOTIFY':
//   return {
//     ...state,
//     message: action.message
//   }
//
// Call it as `dispatch(notify(text))`.
//
export const notify = redux.simpleAction(
  // (optional) Redux event name.
  'NOTIFY',
  // The Redux reducer:
  (state, message) => ({ ...state, message }),
  // The Redux reducer above could be also defined as:
  // 'message'
)

// This is the Redux reducer which now
// handles the actions defined above.
export default redux.reducer()

dispatch(notify('Test'))

// A developer can listen to any Redux event via
// `redux.on('EVENT_NAME', (state, action) => state)`.
//
// If one string argument is passed then it will listen for
// an exact Redux `action.type`.
//
// If two string arguments are passed then the first argument should be
// a `ReduxModule` namespace (the argument to `ReduxModule()` function)
// and the second argument should be a name of an asynchronous `redux.action()`.
// In that case, it will listen only for a "success" event of that `redux.action()`.
//
// To listen for a non-"success" event of a `redux.action()`,
// specify the full Redux event name.
// Example for a "pending" event: 'BLOG_POST: CUSTOM_EVENT_PENDING'.
//
redux.on('BLOG_POST', 'CUSTOM_EVENT', (state, action) => ({
  ...state,
  reduxStateProperty: action.value
}))

{
  http: {
    authentication: {
      // If a token is returned from this function, it gets sent as
      // `Authorization: Bearer {token}` HTTP header.
      accessToken({ useSelector, getCookie, url, originalUrl }) {
        // It's recommended to check the URL to make sure that the access token
        // is not leaked to a third party: only send it to your own servers.
        //
        // `originalUrl` is the URL argument of the `http` utility call.
        // `url` is the `originalUrl` transformed by `http.transformUrl()` settings function.
        // If no `http.transformUrl()` is configured then `url` is the same as the `originalUrl`.
        //
        if (url.indexOf('https://my.api.com/') === 0) {
          return localStorage.getItem('accessToken')
        }
      }
    }
  }
}

{
  ...,
  // Catches errors thrown from page `load()` functions.
  onLoadError(error, { location, url, redirect, dispatch, useSelector, server }) {
    // Not authenticated
    if (error.status === 401) {
      return handleUnauthenticatedError(error, url, redirect);
    }
    // Not authorized
    if (error.status === 403) {
      return redirect('/unauthorized');
    }
    // Not found
    if (error.status === 404) {
      return redirect('/not-found');
    }
    // Redirect to a generic error page in production
    if (process.env.NODE_ENV === 'production') {
      // Prevents infinite redirect to the error page
      // in case of overall page rendering bugs, etc.
      if (location.pathname !== '/error') {
        // Redirect to a generic error page
        return redirect(`/error?url=${encodeURIComponent(url)}`);
      }
    } else {
      // Report the error
      console.error('--------------------------------');
      console.error(`Error while loading "${url}"`);
      console.error('--------------------------------');
      console.error(error.stack);
    }
  },

  http: {
    // Catches all HTTP errors that weren't thrown from `load()` functions.
    onError(error, { location, url, redirect, dispatch, useSelector }) {
      // JWT token expired, the user needs to relogin.
      if (error.status === 401) {
        handleUnauthenticatedError(error, url, redirect);
        // `return true` indicates that the error has been handled by the developer
        // and it shouldn't be re-thrown as an "Unhandled rejection".
        return true
      }
    },
    ...
  }
}

function handleUnauthenticatedError(error, url, redirect) {
  // Prevent double redirection to `/unauthenticated`.
  // (e.g. when two parallel `Promise`s load inside `load`
  //  and both get Status 401 HTTP Response)
  if (typeof window !== 'undefined' && window.location.pathname === '/unauthenticated') {
    return;
  }
  let unauthenticatedURL = '/unauthenticated';
  let parametersDelimiter = '?';
  if (url !== '/') {
    unauthenticatedURL += `${parametersDelimiter}url=${encodeURIComponent(url)}`;
    parametersDelimiter = '&';
  }
  switch (error.message) {
    case 'TokenExpiredError':
      return redirect(`${unauthenticatedURL}${parametersDelimiter}expired=✔`);
    case 'AuthenticationError':
      return redirect(`${unauthenticatedURL}`);
    default:
      return redirect(unauthenticatedURL);
  }
}

// Actions.

export const getUser = redux.action(
  (id) => http => http.get(`https://my-api.cloud-provider.com/users/${id}`),
  'user'
)

export const updateUser = redux.action(
  (id, values) => http => http.put(`https://my-api.cloud-provider.com/users/${id}`, values)
)

// Actions.

export const getUser = redux.action(
  (id) => http => http.get(`api://users/${id}`),
  'user'
)

export const updateUser = redux.action(
  (id, values) => http => http.put(`api://users/${id}`, values)
)

// Settings.

{
  ...
  http: {
    transformUrl: url => `https://my-api.cloud-provider.com/${url.slice('api://'.length)}`
  }
}

// React component.
function ItemPage() {
  const dispatch = useDispatch()

  const onFileSelected = (event) => {
    const file = event.target.files[0]

    // Could also pass just `event.target.files` as `file`
    dispatch(uploadItemPhoto(itemId, file))

    // Reset the selected file
    // so that onChange would trigger again
    // even with the same file.
    event.target.value = null
  }

  return (
    <div>
      ...
      <input type="file" onChange={onFileSelected}/>
    </div>
  )
}

// Redux action creator
function uploadItemPhoto(itemId, file) {
  return {
    promise: ({ http }) => http.post(
      '/item/photo',
      { itemId, file },
      { progress(percent) { console.log(percent) } }
    ),
    events: ['UPLOAD_ITEM_PHOTO_PENDING', 'UPLOAD_ITEM_PHOTO_SUCCESS', 'UPLOAD_ITEM_PHOTO_FAILURE']
  }
}

import path from 'path'

import {
  // Snapshots website pages.
  snapshot,
  // Uploads files.
  upload,
  // Uploads files to Amazon S3.
  S3Uploader,
  // Copies files/folders into files/folders.
  // Same as Linux `cp [from] [to]`.
  copy,
  // Downloads data from a URL into an object
  // of shape `{ status: Number, content: String }`.
  download
} from 'react-pages/static-site-generator'

import configuration from '../configuration'

// Temporary generated files path.
const generatedSitePath = path.resolve(__dirname, '../static-site')

async function run() {
  // Snapshot the website.
  await snapshot({
    // The host and port on which the website
    // is currently running in production mode.
    // E.g. `localhost` and `3000`.
    host: configuration.host,
    port: configuration.port,
    pages: await generatePageList(),
    outputPath: generatedSitePath,
    //
    // Set this flag to `true` to re-run all `load`s on page load.
    // For example, if the data used on the page can be updated
    // in-between the static site deployments.
    // reloadData: true
  })

  // Copy assets (built by Webpack).
  await copy(path.resolve(__dirname, '../build/assets'), path.resolve(generatedSitePath, 'assets'))
  await copy(path.resolve(__dirname, '../robots.txt'), path.resolve(generatedSitePath, 'robots.txt'))

  // Upload the website to an Amazon S3 bucket.
  await upload(generatedSitePath, S3Uploader({
    // Setting an `ACL` for the files being uploaded is optional.
    // Alternatively a bucket-wide policy could be set up instead:
    //
    // {
    //   "Version": "2012-10-17",
    //   "Statement": [{
    //     "Sid": "AddPerm",
    //     "Effect": "Allow",
    //     "Principal": "*",
    //     "Action": "s3:GetObject",
    //     "Resource": "arn:aws:s3:::[bucket-name]/*"
    //   }]
    // }
    //
    // If not setting a bucket-wide policy then the ACL for the
    // bucket itself should also have "List objects" set to "Yes",
    // otherwise the website would return "403 Forbidden" error.
    //
    ACL: 'public-read',
    bucket: confiugration.s3.bucket,
    accessKeyId: configuration.s3.accessKeyId,
    secretAccessKey: configuration.s3.secretAccessKey,
    region: configuration.s3.region
  }))

  console.log('Done');
}

run().catch((error) => {
  console.error(error)
  process.exit(1)
})

// Get the list of all page URLs.
async function generatePageList() {
  const pages = [
    '/',
    '/about',
    // Error pages need a `status` property
    // to indicate that it shouldn't throw on such errors
    // and should proceed with snapshotting the next pages.
    { url: '/unauthenticated', status: 401 },
    { url: '/unauthorized', status: 403 },
    { url: '/not-found', status: 404 },
    { url: '/error', status: 500 }
  ]

  // (optional) Add some dynamic page URLs, like `/items/123`.

  // Query the database for the list of items.
  const { status, content } = JSON.parse(await download(`https://example.com/api/items`))

  if (status !== 200) {
    throw new Error('Couldn\'t load items')
  }

  // Add item page URLs.
  const items = JSON.parse(content)
  return pages.concat(items.map(item => `/items/${item.id}`))
}

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::<bucket-name>"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::<bucket-name>/*"
            ]
        }
    ]
}

import React from 'react'

export default function CoursePage() {
  ...
}

CoursePage.load = [
  async ({ dispatch }) => await dispatch(loadCourseInfo()),
  {
    load: async ({ dispatch }) => await dispatch(loadCoursePrice()),
    client: true
  }
]

import { render } from 'react-pages/client'

await render(settings, {
  // Runs on the initial page load, and then on each navigation.
  onNavigate({ url, location, route, dispatch, useSelector }) {
    if (process.env.NODE_ENV === 'production') {
      // Set up Google Analytics via `gtag`.
      gtag('config', configuration.googleAnalytics.id, {
        // Anonymize IP for all Google Analytics events.
        // https://developers.google.com/analytics/devguides/collection/gtagjs/ip-anonymization
        // This makes Google Analytics compliant with GDPR:
        // https://www.jeffalytics.com/gdpr-ip-addresses-google-analytics/
        'anonymize_ip': true,
        // Google Analytics can get users' "Demographics" (age, sex)
        // from "3rd party" data sources if "Advertising Reporting Features"
        // are enabled in Google Analytics admin panel.
        // Such data could be considered "Personal Identifiable Information"
        // which falls under the terms of GDPR.
        // There's also "Remarketing" feature that could also
        // fall under the terms of GDPR.
        'allow_display_features': false,
        // Specifies what percentage of users should be tracked.
        // This defaults to 100 (no users are sampled out) but
        // large sites may need to use a lower sample rate
        // to stay within Google Analytics processing limits.
        // 'sample_rate': 1,
        // Report "page view" event to Google Analytics.
        // https://stackoverflow.com/questions/37655898/tracking-google-analytics-page-views-in-angular2
        // https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications
        'page_path': location.pathname
      })
    }
  }
})

{
  ...

  stats({ url, route, time: { initialize, load, total } }) {
    statsd.increment('count')

    statsd.timing('initialize', initialize)
    statsd.timing('load', load)
    statsd.timing('total', total)

    if (total > 1000) { // in milliseconds
      db.query('insert into server_side_rendering_stats ...')
    }
  }
}

websocket.onMessage((message, store) => {
  if (message.command) {
    switch (message.command) {
      case 'initialized':
        store.dispatch(connected())
        return console.log('Realtime service connected', message)
      case 'notification':
        return alert(message.text)
      default:
        return console.log('Unknown message type', message)
    }
  }
})

websocket.onOpen((event, store) => {
  websocket.send({ command: 'initialize' })
})

websocket.onClose((event, store) => {
  store.dispatch(disconnected())
})

import WebSocket from 'uws'

const server = new WebSocket.Server({ port: 8888 })

const userConnections = {}

server.on('connection', (socket) => {
  console.log('Incoming WebSocket connection')

  socket.sendMessage = (message) => socket.send(JSON.stringify(message))

  socket.on('close', async () => {
    console.log('Client disconnected')

    if (socket.userId) {
      userConnections[socket.userId].remove(socket)
    }
  })

  socket.on('message', async (message) => {
    try {
      message = JSON.parse(message)
    } catch (error) {
      return console.error(error)
    }

    try {
      switch (message.command) {
        case 'initialize':
          // If a user connected (not a guest)
          // then store `userId` for push notifications.
          // Using an authentication token here
          // instead of simply taking `userId` out of the `message`
          // because the input can't be trusted (could be a hacker).
          if (message.userAuthenticationToken) {
            // (make sure `socket.userId` is a `String`)
            // The token could be a JWT token (jwt.io)
            // and `authenticateUserByToken` function could
            // check the token's authenticity (by verifying its signature)
            // and then extract `userId` out of the token payload.
            socket.userId = authenticateUserByToken(message.userAuthenticationToken)

            if (!userConnections[socket.userId]) {
              userConnections[socket.userId] = []
            }

            userConnections[socket.userId].push(socket)
          }

          return socket.sendMessage({
            command: 'initialized',
            data: ...
          })

        default:
          return socket.sendMessage({
            status: 404,
            error: `Unknown command: ${message.command}`
          })
      }
    } catch (error) {
      console.error(error)
    }
  })
})

server.on('error', (error) => {
  console.error(error)
})

// Also an HTTP server is started and a REST API endpoint is exposed
// which can be used for pushing notifications to clients via WebSocket.
// The HTTP server must only be accessible from the inside
// (i.e. not listening on an external IP address, not proxied to)
// otherwise an attacker could push any notifications to all users.
// Therefore, only WebSocket connections should be proxied (e.g. using NginX).
httpServer().handle('POST', '/notification', ({ to, text }) => {
  if (userConnections[to]) {
    for (const socket of userConnections[to]) {
      socket.sendMessage({
        command: 'notification',
        text
      })
    }
  }
})

// Server side (REST API endpoint)
socket.sendMessage({
  type: 'DISPLAY_NOTIFICATION',
  text
})

// Client side (Redux reducer)
function reducer(state, action) {
  switch (action.type) {
    case 'DISPLAY_NOTIFICATION':
      return {
        ...state,
        notifications: state.notifications.concat([action.text])
      }
    default:
      return state
  }
}