React + Redux project setup.

0 Content.md

Content

1. React Setup
2. Redux Setup
3. Server setup
4. Docker Setup
5. Deployment script

1 React Setup.md

React setup

npx create-react-app my-new-react-app

cd my-new-react-app

git checkout -b task/initial-setup

npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react husky prettier

update README.md:

git clone <repo link if there is>
cd project directory name
npm install

npm run dev

Update package.json with @ scripts:

"dev": "react-scripts start",
"lint": "eslint src/**/*.js src/**/*.jsx",
"format": "prettier --write src/**/*.js src/**/*.jsx",

Just after sccript section:

 "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run format"
    }
  },

create .prettierrc file and add:

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "es5",
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

create .prettierignore file and add:

serviceWorker.js
*.md

node_modules/

Create .eslintrc.js file and add:

module.exports = {
  parser: 'babel-eslint',
  root: true,
  env: {
    node: true,
  },
  extends: ['airbnb', 'plugin:prettier/recommended'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'react/prop-types': [0],
  },
  parser: 'babel-eslint',
  parserOptions: {
    parser: 'babel-eslint',
  },
  overrides: [
    {
      files: ['serviceWorker.js'],
    },
  ],
};

Create .env.example file and add:

REACT_APP_BACKEND_API_PATH=
REACT_APP_FRONT_END_URL=http://localhost:3000

Create .editorConfig file and add:

[*]

charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.{yml,yaml}]
indent_size = 4


[*.{js,jsx,ts,tsx,vue}]
max_line_length = 100

Update serviceWorker.js with:

/* eslint-disable no-param-reassign */
/* eslint-disable no-use-before-define */
/* eslint-disable no-undef */
// This optional code is used to register a service worker.
// register() is not called by default.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.

// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
    // [::1] is the IPv6 localhost address.
    window.location.hostname === '[::1]' ||
    // 127.0.0.0/8 are considered localhost for IPv4.
    window.location.hostname.match(
      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
    )
);

export function register(config) {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    // The URL constructor is available in all browsers that support SW.
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
    if (publicUrl.origin !== window.location.origin) {
      // Our service worker won't work if PUBLIC_URL is on a different origin
      // from what our page is served on. This might happen if a CDN is used to
      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
      return;
    }

    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      if (isLocalhost) {
        // This is running on localhost. Let's check if a service worker still exists or not.
        checkValidServiceWorker(swUrl, config);

        // Add some additional logging to localhost, pointing developers to the
        // service worker/PWA documentation.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            'This web app is being served cache-first by a service ' +
              'worker. To learn more, visit https://bit.ly/CRA-PWA'
          );
        });
      } else {
        // Is not localhost. Just register service worker
        registerValidSW(swUrl, config);
      }
    });
  }
}

function registerValidSW(swUrl, config) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        if (installingWorker == null) {
          return;
        }
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, the updated precached content has been fetched,
              // but the previous service worker will still serve the older
              // content until all client tabs are closed.
              console.log(
                'New content is available and will be used when all ' +
                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
              );

              // Execute callback
              if (config && config.onUpdate) {
                config.onUpdate(registration);
              }
            } else {
              // At this point, everything has been precached.
              // It's the perfect time to display a
              // "Content is cached for offline use." message.
              console.log('Content is cached for offline use.');

              // Execute callback
              if (config && config.onSuccess) {
                config.onSuccess(registration);
              }
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });
}

function checkValidServiceWorker(swUrl, config) {
  // Check if the service worker can be found. If it can't reload the page.
  fetch(swUrl, {
    headers: { 'Service-Worker': 'script' }
  })
    .then(response => {
      // Ensure service worker exists, and that we really are getting a JS file.
      const contentType = response.headers.get('content-type');
      if (
        response.status === 404 ||
        (contentType != null && contentType.indexOf('javascript') === -1)
      ) {
        // No service worker found. Probably a different app. Reload the page.
        navigator.serviceWorker.ready.then(registration => {
          registration.unregister().then(() => {
            window.location.reload();
          });
        });
      } else {
        // Service worker found. Proceed as normal.
        registerValidSW(swUrl, config);
      }
    })
    .catch(() => {
      console.log(
        'No internet connection found. App is running in offline mode.'
      );
    });
}

export function unregister() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(registration => {
      registration.unregister();
    });
  }
}

2 Redux Setup.md

Redux setup

npm i redux react-redux redux-thunk

If you need react router: npm i react-router react-router-dom

Update index.jsx file to:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/rootReducer';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  // eslint-disable-next-line no-undef
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

IF NEEDED: Create src/Utils/LocalStorage.js and add:

/* eslint-disable no-undef */
export function getLocalStorage(key) {
  if (!key) {
    console.error(`${key} doesn't exists.`);
    return null;
  }

  try {
    const valueStr = localStorage.getItem(key);
    if (valueStr) {
      return JSON.parse(valueStr);
    }
    return null;
  } catch (err) {
    console.error(err);
    return null;
  }
}

export function setLocalStorage(key, obj) {
  if (!key) {
    console.error(`${key} doesn't exists.`);
    return null;
  }

  try {
    localStorage.setItem(key, JSON.stringify(obj));
    return true;
  } catch (err) {
    console.error(err);
    return false;
  }
}

export function deleteLocalStorage(key) {
  if (!key) {
    console.error(`${key} doesn't exists.`);
    return null;
  }
  try {
    localStorage.removeItem(key);
    return true;
  } catch (err) {
    console.error(err);
    return false;
  }
}

Create src/actions folder

Create src/reducers/rootReducer.js and add:

import { combineReducers } from 'redux';

const rootReducer = combineReducers({

});

export default rootReducer;

3 server_setup.md

Express with static file server and API routes

// server.js
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const path = require("path");
app.use(express.static(path.join(__dirname, "build")));
app.use(bodyParser.json());
app.get("/api/", (req, res) => {
  res.json({
    content: "Hello from /api/postRequest"
  });
  //API logic
});

app.post("/api/", (req, res) => {
  res.json({
    content: "Hello from /api/postRequest"
  });
  //API logic
});

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "build/index.html"));
});
const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log("Listening on port", port);
});

4 Docker setup.md

# Dockerfile
FROM node:10

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

# For CI. Not yet.
# RUN npm ci --only=production

# Bundle app source
COPY . .

EXPOSE 3030

CMD [ "node", "server.js" ]

5 Deployment script.md

Observe this file carefully before using. Not every project structure is same.

#!/bin/bash

# Fill these things:
REPO=<repo>
BRANCH=production
DIRECTORY=<dir-to-create> # It's usually project/repo name
REACT_APP_BACKEND_API_PATH=<back-end-api-link> # OR "$(curl icanhazip.com)" for server IP
REACT_APP_FRONT_END_URL=<fronendURL> # OR $(curl icanhazip.com)

mkdir $DIRECTORY
# Inside ROOT
cd $DIRECTORY  
git clone $REPO

# Inside Frontend
# cd <fronend-if-exist>
git fetch
git checkout $BRANCH
touch .env

# Get current IP of cloud and put it in .env - not recomended
echo REACT_APP_BACKEND_API_PATH=http://$REACT_APP_BACKEND_API_PATH:5000 > .env #http://$(curl icanhazip.com):5000 > .env
echo REACT_APP_FRONT_END_URL=http://$REACT_APP_FRONT_END_URL > .env #http://$(curl icanhazip.com) >> .env

# Inside ROOT
cd ..

sudo apt-get update
sudo apt-get upgrade -y

sudo ufw allow 5000

# Inside ~
cd ..
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh

sudo apt install docker-compose -y

sudo usermod -aG docker ubuntu
sudo apt install make -y

# sudo docker volume create --name=mongo_data

# if makefile exists
# make build