Hi @verekia :grinning:,

Congratulations on your project! Me and my friend Joana, we started to translate your project to Brazilian Portuguese. It's going to help a lot of people here who don't understand English that well.

Type of issue: bug

Chapter: 4 after adding HMR

If it's a bug:

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
XMLHttpRequest cannot load http://localhost:7000/dist/ffacf69653bfa6a58a17.hot-update.json.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8000' is therefore not allowed access.

Fix:

Add to webpack.config.babel.js

devServer: {
  // ...
  headers: { 'Access-Control-Allow-Origin': '*' }
}

Here's why I think we should migrate from gulp to npm scripts npm scripts

• significantly reduce js-fatigue by reducing dependencies
• No middleware, which usually means less bugs. dont need gulp-webpack. only webpack
• Many newer projects are reflecting this trend

Thoughts?

Chapter: 1 Installing Yarn

Though it is possible to install Yarn through NPM, folks at Yarn highly recommend installing Yarn through installation method best suited for the operating system.

At: https://yarnpkg.com/en/docs/install#alternatives-tab

Note: Installation via npm is generally not recommended. npm is non-deterministic, packages are not signed, and npm does not perform any integrity checks other than a basic SHA1 hash, which is a security risk when installing system-wide apps.

For these reasons, it is highly recommended that you install Yarn through the installation method best suited to your operating system.

I recommend changing the method of installing Yarn from using NPM to using Homebrew by default and a link to the installation page for people with other operating systems.

This tutorial is awesome👍. I'm translating it into Chinese:

https://github.com/pd4d10/js-stack-from-scratch

Is it possible to accept a PR, such as README-cn.md?

I think it will be really helpful for Chinese beginners.

Type of issue: (feature suggestion, bug, translation?)

bug

Chapter:

6 (eslint)

Issue:

Newer versions of airbnb's eslint configuration complain about a lack of dangling commas on multi-line function invocations. For example:

gulp.task('build', ['lint', 'clean'], () =>
   gulp.src(paths.allSrcJs)
     .pipe(babel())
     .pipe(gulp.dest(paths.libDir))
);

Causes linter error: error Missing trailing comma comma-dangle.

Note: This wouldn't be a problem if people copied package.json from the tutorial. But since people generate their own package.json, they will have the most recent version of airbnb's eslint configuration. I don't think people should be instructed to copy package.json, it's important to learn how to generate it with yarn.

How to reproduce:

1. Update eslint-config-airbnb:
   1. in package.json change: "eslint-config-airbnb": "^12.0.0", to "eslint-config-airbnb": "^13.0.0",
   2. run yarn install
2. run yarn start
3. See something to the effect of:

$ yarn start
yarn start v0.16.1
$ gulp 
[15:58:51] Requiring external module babel-register
[15:58:52] Using gulpfile ~/js-stack-from-scratch/tutorial/6-eslint/gulpfile.babel.js
[15:58:52] Starting 'watch'...
[15:58:52] Finished 'watch' after 20 ms
[15:58:52] Starting 'lint'...
[15:58:52] Starting 'clean'...
[15:58:52] Finished 'clean' after 26 ms
[15:58:53] 
/Users/some-user/js-stack-from-scratch/tutorial/6-eslint/gulpfile.babel.js
  22:35  error  Missing trailing comma  comma-dangle
  30:35  error  Missing trailing comma  comma-dangle

✖ 2 problems (2 errors, 0 warnings)

Possible fixes:

Wrap it in parens:

gulp.task('build', ['lint', 'clean'], () => (
   gulp.src(paths.allSrcJs)
     .pipe(babel())
     .pipe(gulp.dest(paths.libDir))
));

or add a trailing comma:

gulp.task('build', ['lint', 'clean'], () =>
   gulp.src(paths.allSrcJs)
     .pipe(babel())
     .pipe(gulp.dest(paths.libDir)),
);

PR

I whipped something up here: #91 If it looks good, I can make similar PRs for the other chapters (if necessary).

Other relevant discussion

eslint/eslint#7588

After adding:

    "env": {
      "browser": true
    }

I received the error:

Error: Command failed: node lib module.js:474 throw err; ^

Error: Cannot find module

I cannot go past this step and I have went back and checked my code. Everything matches accordingly.

Type of issue: Translation

Just started translating into Georgian, hope to get done in a week or so 😊😊😊 Thanks for amazing work 👍

https://github.com/brunjick/js-stack-from-scratch

Type of issue: Translation

I'm translating this repo to Spanish language, I'll send to you @verekia a PR when translation is ready! This tutorial is amazing! Thanks!

Here is the repo for Spanish Version: https://github.com/AlexR1712/js-stack-from-scratch

Suggestion/Enhancement Chapter 2: Babel

"Create a .babelrc file at the root of your project" Add instruction for windows users that this can be included in the package.json file.

Whatever i do, when i use yarn start and yarn dev:wds, the terminal is outputing "Server running on port 8000 (production)", webpack dev server is running fine on port 7000 but the files are served from localhost:8000/static/js/bundle.js and sourcemap doesn't seem to work. The app won't refresh by itslef because it is not listening on webpack dev server port.

I've checked multiple times my files and everything is correct.

Package.json

{
  "name": "js-stack-boilerplate",
  "version": "1.0.0",
  "description": "A nice stack for javascript development",
  "main": "index.js",
  "browserslist": ["> 1%"],
  "scripts": {
    "start": "yarn dev:start",
    "dev:start": "nodemon -e js,jsx --ignore lib --ignore dist --exec babel-node src/server",
    "dev:wds": "webpack-dev-server --progress",
    "prod:build": "rimraf lib dist && babel src -d lib --ignore .test.js && cross-env NODE_ENV=production webpack -p --progress",
    "prod:start": "cross-env NODE_ENV=production pm2 start lib/server && pm2 logs",
    "prod:stop": "pm2 delete server",
    "lint": "eslint src webpack.config.babel.js --ext .js,.jsx",
    "test": "yarn lint && flow && jest --coverage",
    "precommit": "yarn test",
    "prepush": "yarn test && yarn prod:build"
  },
  "author": "Kaldrogh",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.0",
    "babel-eslint": "^7.1.1",
    "babel-jest": "^19.0.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-flow-react-proptypes": "^0.21.0",
    "babel-preset-env": "^1.2.2",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.23.0",
    "cross-env": "^3.2.4",
    "eslint": "^3.18.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-compat": "^1.0.2",
    "eslint-plugin-flowtype": "^2.30.3",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.9.0",
    "flow-bin": "^0.42.0",
    "husky": "^0.13.2",
    "jest": "^19.0.2",
    "nodemon": "^1.11.0",
    "pm2": "^2.4.2",
    "rimraf": "^2.6.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "babel-polyfill": "^6.23.0",
    "compression": "^1.6.2",
    "express": "^4.15.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-hot-loader": "^3.0.0-beta.6"
  }
}

render-app.js

// @flow

import { APP_CONTAINER_CLASS, STATIC_PATH, WDS_PORT } from '../shared/config'
import { isProd } from '../shared/util'

const renderApp = (title: string) =>
`<!doctype html>
<html>
  <head>
    <title>${title}</title>
    <link rel="stylesheet" href="${STATIC_PATH}/css/style.css">
  </head>
  <body>
    <div class="${APP_CONTAINER_CLASS}"></div>
    <script src="${isProd ? STATIC_PATH : `http://localhost:${WDS_PORT}/dist`}/js/bundle.js"></script>
  </body>
</html>
`

export default renderApp

config.js

// @flow

export const WEB_PORT = process.env.PORT || 8000
export const WDS_PORT = 7000
export const STATIC_PATH = '/static'

export const APP_NAME = 'Hello App!'

export const APP_CONTAINER_CLASS = 'js-app'
export const APP_CONTAINER_SELECTOR = `.${APP_CONTAINER_CLASS}`

server/index.js

// @flow

import compression from 'compression'
import express from 'express'

import { APP_NAME, STATIC_PATH, WEB_PORT } from '../shared/config'
import { isProd } from '../shared/util'
import renderApp from './render-app'

const app = express()

app.use(compression())
app.use(STATIC_PATH, express.static('dist'))
app.use(STATIC_PATH, express.static('public'))

app.get('/', (req, res) => {
  res.send(renderApp(APP_NAME))
})

app.listen(WEB_PORT, () => {
  // eslint-disable-next-line no-console
  console.log(`Server running on port ${WEB_PORT} ${isProd ? '(production)' : '(development).\nKeep "yarn dev:wds" running in an other terminal'}.`)
})

Thanks for helping me out.

Type of issue: (feature suggestion, bug?)

Bug/Optimization

Chapter:

[ESLint] (https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/02-babel-es6-eslint-flow-jest-husky.md#eslint)

You write in the Note that the command won't work on windows. Thats correct for the default commandline (cmd). But if you use the git bash, you can execute the command. with the replacement of yarn add -dev to npm install --save-dev it runs with npm also.

Regards André

I've compiled a list of the currently relevant JS and TS tooling (that I could find), and I've also linked to this resource, since it's very close in focus, but with an added note that it's out of date.

In particular, some things that have changed are:

• Immer for Redux instead of Immutable.js
• Redux Toolkit was introduced
• Emotion and styled-components over JSS
• Increasing focus on API generators like Postgraphile, Hasura, over implementing APIs with Express
• Increasing focus on zero-configuration starters like CRA
• Flow increasingly less relevant compared to TypeScript
• Prettier is very popular

Hey everyone. It's been more than a year since the last update of JS Stack from Scratch, which is a lifetime in the JS ecosystem. A major update is long overdue. Here are the changes to come:

Changes

• Updating all the packages
• Babel 7
• ESLint 5
• A more modern syntax (like JS destructuring, async / await)
• Express -> Koa
• Webpack -> Parcel (as soon as they support Babel 7)
• Bootstrap -> Material UI
• PostgreSQL with Knex
• CRUD operations
• Authentication
• E2E tests with Puppeteer
• HOC
• Redis
• Docker
• GraphQL
• Prettier
• Dotenv
• Joi
• Removing Immutable, Travis, Coveralls, some unit tests

The tutorial will offer using 🌹Sharyn as an opt-in, a library I've created specifically for projects that use this stack.

Timeline

1st milestone

I need to work a bit more on Sharyn and the Sharyn Boilerplate first.

2nd milestone

Updating the boilerplate (sneak peek of v3) of the tutorial to reflect these changes.

3rd milestone

Updating the walkthrough code of individual chapters.

4th milestone

Updating the instructions.

After that, translations can start.

Type of issue: (feature suggestion, bug?)

Suggestion

Chapter:

no-chapter

Why use .jsx instead of .js? It's not a best practice: https://github.com/facebook/create-react-app/issues/87#issuecomment-234627904

Type of issue: feature suggestion

Chapter: 02

I added the following config in my package.json:

"jest": {
    "collectCoverageFrom": [
      "src/**.{js,jsx}"
    ]
  }

I think it really helps in showing real code coverage by collecting coverage from all src files rather than only files that are being imported by tests (default behaviour).

See: https://github.com/facebook/jest/issues/1211