Front Basic - Avaliação Squid

This application was overengineered to show how to properly create a high quality react project with webpack. It could be improved with:

Tests (Jest/Cypress)
Webpack optimizations to properly pass lighthouse tests (manifest.json, robot.txt, minify, etc.).

I can also show how to properly structure these missing topics.

Workspace

Visual Studio Code 1.45.1

VSCode extensions:
- Prettier - Code formatter 4.7.0
- Eslint 2.1.5
- VSCode MDX 0.1.4
VSCode settings:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false
  },
  "javascript.validate.enable": false,
  "eslint.validate": ["markdown", "md", "mdx"],
  "prettier.requireConfig": true,
}

Configuration

Install these packages (prefer the listed versions):

yarn 1.21.1
npm 6.13.4
node 12.16.1

Create a .env file with the required variables:

API_ADDRESS=https://vision.squidit.com.br/v1/feed/test

Install all dependencies with yarn (not npm!!)

yarn

Start the webpack-dev-server

yarn dev

Commands

# Installs all dependendies
$ yarn

# Runs for web production (needs yarn build first)
$ yarn start

# Runs for web development
$ yarn dev

# Builds for web (compiled to dist)
$ yarn build

# Checks Eslint errors
$ yarn lint

# Formats all files with prettier
$ yarn format

# Checks if all files are formatted with prettier
$ yarn check-format

# Checks typescript errors
$ yarn check-types

# CI validation command
$ yarn setup

# Storybook
$ yarn storybook

# Commits with karma interface
$ yarn commit

Tests

It was just a page, but could use Cypress/Jest if it was a bigger application.

CI configuration

Set the environment variable API_ADDRESS (in the CI environment variable section) with the server address.
The only command needed to be put on CI is 'yarn setup' which tests formatting with prettier, eslint errors, typescript errors and build errors.

Deploy

First, be sure you did everything from the configuration section (steps 1 to 4 are the most important ones).
'yarn build' command will compile all files and put them into dist folder.
Install Apache. (I'm using XAMPP for this example. Link: https://www.apachefriends.org/download.html)
Clean up htdocs folder of xampp/htdocs.
Put all files from dist folder into xampp/htdocs folder.
Open XAMPP and, on the line of module apache, click on the 'Start' button.
Access 'localhost' from your browser and see that the page loads correctly. It will still not work if you try to access a route manually (like 'localhost/login'). See below how to fix it.

For react router works correctly, you need to create a file '.htaccess' in the root of htdocs directory. Put this info there:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Website

https://brave-colden-2cf755.netlify.app

DanielFerrariR/front-basic