|
1 | 1 | # react-socket-simple-chat |
2 | | -a simple chat application that uses react.js, redux and socket.io |
| 2 | + |
| 3 | +<!-- A simple chat application that uses react.js, redux and socket.io. --> |
| 4 | + |
| 5 | + |
| 6 | +## Status |
| 7 | + |
| 8 | +Development tools build on top of webpack v4, with HMR (also react HMR), sass and css modules support, and the webpack-dev-server uses the machines IP from the local network to enable the multi screen development, with that is possible to have the application openned over the desktop, tablet and mobile at the same time. |
| 9 | + |
| 10 | +I also keep the webpack configure to consider the file paths from the `./src` directoty, and with that avoid the import hell to return to parents directory ( avoid: `import ComponentName from '../../components/ComponentName'`, to use like: `import ComponentName from 'components/ComponentName'` where the components directory is located at `./src/components`, so no matter how deep you are, you'll be able to import from the project src root folder ). |
| 11 | + |
| 12 | +## Prerequisites |
| 13 | + |
| 14 | +* Must have [Git](https://git-scm.com/) installed |
| 15 | + |
| 16 | +* Must have the [node.js](https://nodejs.org/en/) (at least v8+) installed with the npm (Node Package Manager) |
| 17 | + |
| 18 | + |
| 19 | +## Recommended |
| 20 | + |
| 21 | +* Use the [yarn](https://yarnpkg.com/), you can install it over the npm `npm install -g yarn` |
| 22 | + |
| 23 | +* Use a node version manager |
| 24 | + |
| 25 | + * [unix systems](https://github.com/creationix/nvm) |
| 26 | + |
| 27 | + * [windows](https://github.com/coreybutler/nvm-windows) |
| 28 | + |
| 29 | + |
| 30 | +## Commands |
| 31 | + |
| 32 | +### After cloned from the github repository |
| 33 | + |
| 34 | +* `yarn` or `npm install` |
| 35 | + |
| 36 | + |
| 37 | +### Available commands |
| 38 | + |
| 39 | +* start the development: `yarn start` or `npm start` |
| 40 | + |
| 41 | +* production build |
| 42 | + |
| 43 | + * generate: `yarn build` or `npm run build` |
| 44 | + |
| 45 | + * generate and test it: `yarn do-serve` or `npm run do-server` |
| 46 | + |
| 47 | +* deploy the production build to the github gh-pages: `yarn do-deploy` or `npm run do-deploy` |
| 48 | + |
| 49 | + |
| 50 | +## Useful links |
| 51 | + |
| 52 | +* [React](https://reactjs.org/) |
| 53 | + |
| 54 | +* [Webpack](https://webpack.js.org/) |
| 55 | + |
| 56 | +* [Understanding and Using rem Units in CSS — SitePoint](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) |
| 57 | + |
| 58 | +* [How to use Webpack with React: an in-depth tutorial | freeCodeCamp](https://medium.freecodecamp.org/learn-webpack-for-react-a36d4cac5060) |
| 59 | + |
| 60 | +* [Optimizing front-end delivery with Webpack 4 | Jasel Gadhia](https://jes.al/2018/04/optimizing-front-end-delivery-with-Webpack-4/) |
| 61 | + |
0 commit comments