verekia / js-stack-from-scratch Goto Github PK
View Code? Open in Web Editor NEWπ οΈβ‘ Step-by-step tutorial to build a modern JavaScript stack.
License: MIT License
π οΈβ‘ Step-by-step tutorial to build a modern JavaScript stack.
License: MIT License
Add an explanation about immutable-js/immutable-js#863
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: { ... },
...
}
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:
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
Don't we need webpack dev server?
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
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';
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
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:
Apply whichever suggestions you want or close this issue, I just wanted to share that feedback. π
In 3 - Setting up ES6 with Babel and Gulp there is a missing dependency: del
.
Just started translating into Georgian, hope to get done in a week or so πππ
Thanks for amazing work π
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
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.
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
Could I translate this guide to brazilian portuguese? :D
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 ?
feature suggestion
I see many projects use bower as package manager for frontend. May you add introduction to bower?
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
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.
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.
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?
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.
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.
Please see Pull request #9 for potential improvement to webpack babel-loader options.
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.
spam
Yarn is another package manager which is much faster than NPM, caches packages offline, and fetches dependencies more predictably.
npm
caches packages offline too. Or, did you mean the offline install option in yarn?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
bug
2 - Installing and using a package
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?
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?
bug
6 (eslint)
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
.
eslint-config-airbnb
:
package.json
change: "eslint-config-airbnb": "^12.0.0",
to "eslint-config-airbnb": "^13.0.0",
yarn install
yarn start
$ 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)
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)),
);
I whipped something up here: #91
If it looks good, I can make similar PRs for the other chapters (if necessary).
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.
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.
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.
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
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
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).
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 π
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.
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)
/* 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, 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!
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
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.
I think this project should migrate to jest from mocha and chai. Jest is well known for being extremely easy to configure. Thoughts?
What about a chapter on automatic documentation generation?
Like https://github.com/reactjs/react-docgen
I think it could be useful
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.