verekia / js-stack-from-scratch Goto Github PK

Flow can now be run as an eslint plugin. Currently the docs use gulp to run flow, which is doesn't make for a good developer experience. Here's a demo:

Would a PR for updating the docs for this be welcome?

in the first section you instruct us to:

In package.json, add "start": "node ." in the scripts object.

however, after running yarn init my package.json file did not have a scripts object. i had to add that key manually.

Type of issue: Translation

Hello! Good tutorial! 💯

I just start translate it to French
Here is the French Version of repo: https://github.com/taggaddaaaa/js-stack-from-scratch 🇫🇷

I'll submit a PR when it's ready

Hi @verekia 😀,

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: 5

I can run gulp in prior chapters, but not after converting to gulpfile.babel.js

5-es6-modules-syntax> gulp
path.js:7
throw new TypeError('Path must be a string. Received ' + inspect(path));
^

TypeError: Path must be a string. Received null
at assertPath (path.js:7:11)
at Object.basename (path.js:1355:5)
at Liftoff.buildEnvironment (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:113:52)
at Liftoff. (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:181:32)
at module.exports (/usr/local/lib/node_modules/gulp/node_modules/liftoff/node_modules/flagged-respawn/index.js:17:3)
at Liftoff. (/usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:174:9)
at /usr/local/lib/node_modules/gulp/node_modules/liftoff/index.js:148:9
at /usr/local/lib/node_modules/gulp/node_modules/v8flags/index.js:79:12
at /usr/local/lib/node_modules/gulp/node_modules/v8flags/index.js:35:7
at _combinedTickCallback (internal/process/next_tick.js:67:7)

node -v
v6.9.1
npm -v
2.15.9

Type of issue: bug

Chapter: 7

Following steps up to "Run yarn start, you should now see Webpack building your client-bundle.js" I get this error:

yarn start v0.16.1
error Command "start" not found.

If I do a gulp, I get:

module.js:474
    throw err;
    ^

Error: Cannot find module 'webpack-stream'

If I use files from git (chapter 7) I still get this last error.

My node version is v7.1.0.

Type of issue: feature suggestion

Chapter: new chapter

What about a chapter on automatic documentation generation?
Like https://github.com/reactjs/react-docgen
I think it could be useful

Don't we need webpack dev server?

towards the end of section 7 you state:

Run yarn start, you should now see Webpack building your client-bundle.js file, and opening index.html in your browser should display "Wah wah, I am Browser Toby".

the webpack build is okay, but my browser does not open a new window. is there something special i need to do?

It might be useful to add a tip to the webpack chapter about using ES6 syntax for webpack.config.js. All it takes is to rename the file to webpack.config.babel.js, and then you use standard ES6 syntax, including import and export:

import Webpack from 'webpack';

import pkg from './package.json';

...

export default {
  entry: ...,
  output: { ... },
  module: { ... },
  ...
}

Type of issue: Bug

Chapter: 7

If it's a bug:

In chapter 7 we have a passage in Integrating Webpack to Gulp section:

Run yarn start, you should now see Webpack building your client-bundle.js file. Opening index.html in your browser should display "Wah wah, I am Browser Toby".

But it won't actually work on that stage cause we still didn't add clientBundle: 'dist/client-bundle.js?(.map)' to our paths config. What actually happens is we get an exception:

TypeError: Cannot read property '0' of undefined … globby/index.js:12:16

So it would be great to change the order of the instructions: first saying to add the path, and only then to run the yarn start. Cause I would imagine this error could be quite confusing for a novice.

Thanks.

The tutorial says:

As you can see, tests are run on transpiled code in lib, which is why build is a prerequisite task of test

But the test itself does not import from lib, it seems to import dogReducer from the ES6 code. Is that fine?

import dogReducer from '../../client/reducers/dog-reducer';

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

Type of issue: Translation

Hello!

I'm translating this repo to Thai language in this repo.

I'll submit a pull request when the translation is complete.

BTW. This tutorial is awesome :D

Airbnb styleguide is used for this project, but naming of files (button.jsx, bark-message.jsx, etc.) conflicts with the airbnb one:

A base filename should exactly match the name of its default export.
https://github.com/airbnb/javascript#naming--filename-matches-export

If you agree, I can open a pull request with renamed files.

In the case of: 10. Immutable Redux, I can see this:

import { Map } from 'immutable';
import { MAKE_BARK } from '../actions/dog-actions';

const initialState = Map({
  hasBarked: false,
});

Isn't a bad practice to replace Map (which is native) with the Map version from Immutable?

I think it's better idea to just import Immutable and use Immutable.Map().

Do you accept PR for this?

In 3 - Setting up ES6 with Babel and Gulp there is a missing dependency: del.

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

Hi, when I am doing chapter 7, I keep getting this error from gulp:
src/client/app.js
1:1 error 'babel-polyfill' should be listed in the projects's dependencies. Run 'npm i -S babel-polyfill' to add it import/no-extraneous-dependencies

Actually in my dependencies, there is 'babel-polyfill', it's werid.
I try to add it again by 'npm i -S babel-polyfill', but it does not work, still give me the same error.

I am on Ubuntu 16.04, and all the previous chapters work fine.

By the way, thanks for the excellent course!

Hi

When I execute "yarn start" in the Chapter 6, showing this error:

/home/username/Proyectos/tutoriales/stack_scratch/gulpfile.babel.js:3
import gulp from 'gulp';
^^^^^^

SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at loader (/home/username/Proyectos/tutoriales/stack_scratch/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/username/Proyectos/tutoriales/stack_scratch/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Liftoff.handleArguments (/home/username/Proyectos/tutoriales/stack_scratch/node_modules/gulp/bin/gulp.js:116:3)
    at Liftoff.<anonymous> (/home/username/Proyectos/tutoriales/stack_scratch/node_modules/liftoff/index.js:198:16) 

gulpfile.babel.js

/* eslint-disable import/no-extraneous-dependencies */

import gulp from 'gulp';
import babel from 'gulp-babel';
import eslint from 'gulp-eslint';
import del from 'del';
import { exec } from 'child_process';

const paths = {
  allSrcJs: 'src/**/*.js',
  gulpFile: 'gulpfile.babel.js',
  libDir: 'lib',
};

gulp.task('lint', () =>
  gulp.src([
    paths.allSrcJs,
    paths.gulpFile,
  ])
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
);

gulp.task('clean', () => del(paths.libDir));

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

gulp.task('main', ['build'], (callback) => {
  exec(`node ${paths.libDir}`, (error, stdout) => {
    console.log(stdout);
    return callback(error);
  });
});

gulp.task('watch', () => {
  gulp.watch(paths.allSrcJs, ['main']);
});

gulp.task('default', ['watch', 'main']);

PD: This happen in my local project
Thanks in advance

Hi and thanks for the great tutorial and the effort that you put into it, really like it!

Here is a problem I cannot solve myself:
Running npm install --save-dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react (Chapter 06) results in

npm WARN package.json [email protected] No description
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data
npm WARN peerDependencies The peer dependency eslint-plugin-import@^1.16.0 included from eslint-config-airbnb will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/Johannes/.nvm/versions/node/v4.5.0/bin/node" "/Users/Johannes/.nvm/versions/node/v4.5.0/bin/npm" "install" "--save-dev" "eslint" "eslint-config-airbnb" "eslint-plugin-import" "eslint-plugin-jsx-a11y" "eslint-plugin-react"
npm ERR! node v4.5.0
npm ERR! npm  v2.15.9
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants eslint-plugin-import@^1.16.0
npm ERR! peerinvalid Peer [email protected] wants eslint-plugin-import@^1.16.0

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/Johannes/Documents/3_code/node/npm-debug.log

How can I get past this error?

Wrong linter

Chapter 6

Question:

Are you sure about the linter? Because I've been writing JS for quite some time now, and I'm pretty sure that semicolons are not needed (just as an example).

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

feature suggestion

Suggestion

I see many projects use bower as package manager for frontend. May you add introduction to bower?

First off I'd like to thank you for this fantastic resource. It's absolutely indispensable to the community!

Second I'm wondering if the plans for tutorial sections covering production mode have been put on hold? I see you have a branch for setting up Express and updating Gulp to accommodate--but it looks like some essential bits are missing, e.g. minification. I also noticed the version 2 branch doesn't include a section for this.

It would be fantastic to at least see the production branch somehow incorporated into the second version of the tutorial--that sort of closes the loop as it were.

Type of issue: Translation

I'm translating this repo to German, I'll submit a PR once I'm done translating.

You can Follow/Contribute from here: https://github.com/RadLikeWhoa/js-stack-from-scratch

Yarn is another package manager which is much faster than NPM, caches packages offline, and fetches dependencies more predictably.

1. npm caches packages offline too. Or, did you mean the offline install option in yarn?
2. I didn't understand what do you mean by "fetches dependencies more predictably"

Maybe I'm doing something wrong, gulp passes and it prints out "Hello ${str}. I copied your code but it's still the same. Does anyone had the same problem

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

Does this setup give a workable frontend debugging experience? With source maps providing the mapping between modules and es6 code in stead of minified concatenated app.js files containing tens thousands lines of transpiled-to-ES5 code totally not resembling the original ES6 source?

I'm asking because this seems to be a really hard problem for the EmberJS team to solve and noone strangely seems to care enough

Type of issue:

bug

Chapter:

2 - Installing and using a package

Description

The end note about the difference between dependencies and dev-dependencies is quite confusing to me, in that it leaves me confused, rather than enlightened about the difference between the two.

This is the specific sentence that I'm referring to:

"dependencies" is more general than "devDependencies", which are packages that you only need during development, not production (typically, build-related packages, linters, etc)

Could it possibly be re-worded and/or broken into multiple sentences?

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: Linting

Chapter: 6

If it's a bug:

Trying to lint results in the following error output:

Error: /mydir/node_modules/eslint-config-airbnb/rules/react-a11y.js:

	Configuration for rule "jsx-a11y/anchor-has-content" is invalid:
	Value "" is the wrong type.

spam

In "7 - Client app with Browserify" -> gulpfile.js

The old build-client is renamed to build-server and a new build-client is introduced.
The Readme file does not clarify this.

Bug

Tutorial 4

• proceed to yarn start
• observe gulp is not a command

New

• run yarn add --dev gulp
• retry yarn start
• observe Wah Wah

In order to use multiple files to develop, but serve only one JS file to the client app (saving expensive HTTP requests),

https://github.com/verekia/modern-js-stack-training/tree/master/7-client-browserify

Maybe you could update that part. When using HTTP/2 this is not ture anymore

Type of issue: Translation

Hi! Impressed with your tutorial! 💯

Me and my wife start to translate it to Russian
Here is the Russian Version of repo: https://github.com/UsulPro/js-stack-from-scratch

We'll submit a PR when it's ready 👍

Type of issue: Feature Transition

Chapter: 11

I think this project should migrate to jest from mocha and chai. Jest is well known for being extremely easy to configure. Thoughts?

Many people point to this tutorial as an illustration of JS fatigue, I disagree with them and have a couple of suggestions for reducing perceived complexity:

• mention create-react-app somewhere at the beginning
• drop "ES6" when listing tools at the intro ("ES6, Babel, Gulp,…") because Babel already does ES6
• consider adding Jest to the list, which is an alternative to the Mocha/Chai/Sinon combo, but it's a single tool so it looks less intimidating
• clarify in the intro that many of these tools are optional, people don't have to lint, type-check, have a single app state, enforce immutability etc.
• clarify in the intro that some of the mentioned tools can be alternatives to each other (yarn/npm, gulp/webpack…)

Apply whichever suggestions you want or close this issue, I just wanted to share that feedback. 😉

Add an explanation about immutable-js/immutable-js#863

Awesome read so far!

When I try to run 'npm start' when instructed in Chapter 3, I receive the error:

No command 'gulp' found

After reading the gulp docs, I believe this is because we need to install gulp-cli first.
$ npm install --global gulp-cli

Hey there, this is a really great resource for people. I was wondering whether you'd be willing to take a PR for a section on TypeScript, since I noticed you also had a section on type-checking with Flow as well.

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.

Could I translate this guide to brazilian portuguese? :D

Please see Pull request #9 for potential improvement to webpack babel-loader options.

I see that there are plans to implement some styling. Which modules are you planning to use? For now I use a combination of webpack loaders to load sass/css. But maybe there are better packages:

css-loader
postcss-loader
sass-loader

Type of issue: Translation

I'm translating this repo to Turkish language, I'll ping you with a PR when I'm ready @verekia !
Thanks for this awesome tutorial!

You can Follow/Contribute from here: https://github.com/atakangktepe/js-stack-from-scratch

Feature suggestion

I have noticed that a large number of the issues are relative to translation.

Why not coordinate this in a cleaner way over something like transifex ?

I think it would be great if we could include an editor configuration describing how to setup IDE/text editors for these tools. Proper integration significantly improves developer experience.

Don't know how to get uglify working. I installed yarn add --dev gulp-uglify babel-preset-es2015 and tried this:

gulp.task('build-distribution', ['clean'], () =>
  gulp.src(paths.clientEntryPoint)
    .pipe(babel({
      presets: ['es2015'],
    }))
    .pipe(webpack(webpackConfig))
    .pipe(uglify())
    .pipe(gulp.dest(paths.distDir)));

And I get an error that looks like this:

$ gulp build-distribution
[21:54:04] Requiring external module babel-register
[21:54:04] Using gulpfile ~/coding/webolith/gulpfile.babel.js
[21:54:04] Starting 'clean'...
[21:54:04] Finished 'clean' after 11 ms
[21:54:04] Starting 'build-distribution'...

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: punc (:) (line: 1, col: 10, pos: 10)

Error
    at new JS_Parse_Error (eval at <anonymous> (/Users/cesar/coding/webolith/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1545:18)
    at js_error (eval at <anonymous> (/Users/cesar/coding/webolith/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1553:11)
    at croak (eval at <anonymous> (/Users/cesar/coding/webolith/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2089:9)
    at token_error (eval at <anonymous> (/Users/cesar/coding/webolith/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2097:9)
    at unexpected (eval at <anonymous> (/Users/cesar/coding/webolith/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2103:9)
    at semicolon (eval at <anonymous> (/Users/cesar/coding/webolith/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2123:56)
    at simple_statement (eval at <anonymous> (/Users/cesar/coding/webolith/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2314:73)
    at eval (eval at <anonymous> (/Users/cesar/coding/webolith/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2164:47)
    at eval (eval at <anonymous> (/Users/cesar/coding/webolith/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2136:24)
    at block_ (eval at <anonymous> (/Users/cesar/coding/webolith/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2429:20)
    at createError (/Users/cesar/coding/webolith/node_modules/gulp-uglify/lib/create-error.js:6:14)
    at wrapper (/Users/cesar/coding/webolith/node_modules/lodash/_createHybrid.js:87:15)
    at trycatch (/Users/cesar/coding/webolith/node_modules/gulp-uglify/minifier.js:26:12)
    at DestroyableTransform.minify [as _transform] (/Users/cesar/coding/webolith/node_modules/gulp-uglify/minifier.js:76:19)
    at DestroyableTransform.Transform._read (/Users/cesar/coding/webolith/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:159:10)
    at DestroyableTransform.Transform._write (/Users/cesar/coding/webolith/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:147:83)
    at doWrite (/Users/cesar/coding/webolith/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:313:64)
    at writeOrBuffer (/Users/cesar/coding/webolith/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:302:5)
    at DestroyableTransform.Writable.write (/Users/cesar/coding/webolith/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:241:11)
    at Stream.ondata (stream.js:31:26)
error Command failed with exit code 1.