CRUD React Demo Application

Table of Contents

• Prerequisites
• Install
• Run
• Build
• Test
• Lint
• Debug
• TODO
• Resources

Prerequisites

You need to have the following programs installed on your machine:

• Node.js (>= 8.11.3)
• Yarn
• Docker

You have to use docker-compose in order to build and run the multi-container server application which includes a test PostgreSQL database and a Node.js server which provides the API. The provided docker-compose.yml relies on 2 environment files which have to be configured the following way:

.env.db:

POSTGRES_USER=postgres
POSTGRES_PASSWORD=pw
POSTGRES_DB=testdb

.env.server:

# Must match the service name of the database in docker-compose.yml
DATABASE_HOST=db

# Must match POSTGRES_USER in .env.db if other than postgres
DATABASE_USER=

# Must match POSTGRES_PASSWORD in .env.db if other than pw
DATABASE_PASSWORD=

# Must match POSTGRES_DB in .env.db if other than testdb
DATABASE_DB=

# If you have an OAuth GitHub Application then you can provide its client id and secret. The callback URL of your app must be set to: http://localhost:3000/api/v1/auth/github/callback
# GITHUB_CLIENT_ID=g17hu8cl13n71d
# GITHUB_CLIENT_SECRET=g17hu8cl13n753cr37

# URL to redirect to after a successful authentication
REDIRECT_URL=/

# If you want to use a fake authentication
NODE_ENV=test

Note: If you're interested in the implementation details of the backend application then you can find it here

Install

yarn

Run

yarn start

Build

yarn build

Test

yarn test

# With coverage report
yarn test:coverage

Lint

yarn lint

# With an attempt to fix selected rules
yarn lint:fix

Debug

Instructions for debugging in VS Code:

{
    "name": "Debug React",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceRoot}/src"
},
{
    "name": "Debug React Tests",
    "type": "node",
    "request": "launch",
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts-ts",
    "args": [
        "test",
        "--runInBand",
        "--no-cache",
        "--env=jsdom"
    ],
    "cwd": "${workspaceRoot}",
    "protocol": "inspector",
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen"
},
{
    "name": "Debug Current React Test",
    "type": "node",
    "request": "launch",
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts-ts",
    "args": [
        "test",
        "--env=jsdom",
        "${relativeFile}"
    ],
    "cwd": "${workspaceRoot}",
    "protocol": "inspector",
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen"
}

React

1. Start the application with yarn start
2. Go to Debug panel in VS Code and select Debug React
3. Click on Start Debugging
4. Set a breakpoint

React Tests

1. Set a breakpoint
2. Go to Debug panel in VS Code and select Debug React Tests
3. Click on Start Debugging

Current React Test

1. Set a breakpoint in the currently opened test file
2. Go to Debug panel in VS Code and select Debug Current React Test
3. Click on Start Debugging

TODO

• Accessbility

Resources

• Bootstrap
• create-react-app-typescript
• create-react-app
• Enzyme
• Google Fonts
• google-webfonts-helper
• Jest
• React Date Picker
• react-redux-toastr
• React-Select
• reactstrap
• Redux Form
• Redux-Saga