JavaScript development environment discussed in "Building a JavaScript Development Environment" on Pluralsight

Home Page: https://app.pluralsight.com/library/courses/javascript-development-environment/table-of-contents

License: MIT License

JavaScript 87.90% HTML 11.60% CSS 0.51%

javascript-development-environment's Introduction

JavaScript Development Environment

This is a generic JavaScript development environment that I build from scratch in "Building a JavaScript Development Environment" on Pluralsight. This isn't tied to any specific JS framework.

Get Started

Install Node 6 or newer. Need to run multiple versions of Node? Use nvm or nvm-windows
Clone this repository. - git clone https://github.com/coryhouse/javascript-development-environment.git or download the zip
Make sure you're in the directory you just created. - cd javascript-development-environment
Install Node Packages. - npm install
Run the app. - npm start -s This will run the automated build process, start up a webserver, and open the application in your default browser. When doing development with this kit, this command will continue watching files all your files. Every time you hit save the code is rebuilt, linting runs, and tests run automatically. Note: The -s flag is optional. It enables silent mode which suppresses unnecessary messages during the build.
Having issues? See below.

Having Issues? Try these things first:

Run npm install - If you forget to do this, you'll see this: babel-node: command not found.
Try running the latest version of Node.
Make sure files with names that begin with a dot (.babelrc, .editorconfig, .eslintrc) are copied to the project directory root. This is easy to overlook if you copy this repository manually.
Don't run the project from a symbolic link. It will cause issues with file watches.
Having linting issues? Delete any .eslintrc that you're storing in your user directory. Also, disable any ESLint plugin / custom rules that you've enabled within your editor. These will conflict with the ESLint rules defined in the course.
Seeing Error: listen EADDRINUSE :::3000? That means port 3000 is already in use on your machine. You probably have another instance of this project running on your machine in a different window. So find that window and kill the other instance using Ctrl+C.
Nothing above work? Delete your node_modules folder and re-run npm install.

Development Dependencies

Dependency	Use
babel-cli	Babel Command line interface
babel-core	Babel Core for transpiling the new JavaScript to old
babel-loader	Adds Babel support to Webpack
babel-preset-latest	Babel preset for running all the latest standardized JavaScript features
babel-register	Register Babel to transpile our Mocha tests
chai	Assertion library
chalk	Colored command line output
cheerio	Supports querying DOM with jQuery like syntax - Useful in testing and build process for HTML manipulation
compression	gzip http output
cross-env	Cross-environment friendly way to handle environment variables
css-loader	Add CSS support to Webpack
eslint	Lints JavaScript
eslint-plugin-import	Advanced linting of ES6 imports
eslint-watch	Add watch functionality to ESLint
express	Serves development and production builds
extract-text-webpack-plugin	Extracts CSS into separate file for production build
html-webpack-plugin	Generate HTML file programatically via Webpack
jsdom	In-memory DOM for testing
json-schema-faker	Declare a JSON schema for generating fake data
json-server	Serve a JSON API locally
localtunnel	Create a tunnel to your local machine
mocha	JavaScript testing library
nock	Mock HTTP requests via Node
npm-run-all	Display results of multiple commands on single command line
numeral	Library for working with numbers
open	Open app in default browser
rimraf	Delete files
style-loader	Add Style support to Webpack
webpack	Bundler with plugin system and integrated development server
webpack-dev-middleware	Adds middleware support to webpack
webpack-hot-middleware	Adds hot reloading to webpack
webpack-md5-hash	Used to hash files generated by Webpack using MD5 so that their names change when the content changes

javascript-development-environment's People

Contributors

Stargazers

Watchers

Forkers

zhaoshengjun bforrest reinisriekstins calvimor adanielyan markkra chrisbadalucco nopierson matt-dionis ztmenna michielvermeir nhtera caviles brutalsimplicity leandronishijima korn1699 lockerfish algiers spartan448366 yousefhageg awanee-pandey andysw wschae davidelsche kimballjohnson nickchucode nawhanyate jeshan dmkcode svago dismel-eng rbernardino mahesh-singh pharasiuk sanram srdjanrakic johnplummer allenallenshi wiredawg madhavsharmaagra xyz-data nastanford sandeepkumarpuli tkssharma alan2207 hhimanshu prasad0552 cedricd devojtek plantporridge franco21191 renelopez sewemark ankitdsh bowen31337 shivajothi smmakani erichutchinson eaorak nickbaldwin itc205 ekas jodishwaran phiratio pnminh omahane nbastidas hammybabar xiyau apeixinho crosseyejack joshmccall221 delciopolanco jithinjks sk-cse anikets43 mallows98 mgavin4 timoyan qinghaitvxq study-fork ramonelias abinayakadhirvel mongru jsanchezamai zbrianw mayank141 talsalkini jeket pablogafa gerardopenya ktpm489 juansuerogit mrsagile luanac jaleelahmed loki-one context-dev berlinsky hwalrus

javascript-development-environment's Issues

Error when running npm start with babel-node

When i run the babel-node enabled package.json file I receive an error. Output from npm-debug.log below:

0 info it worked if it ends with ok 1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 5 info lifecycle [email protected]~prestart: [email protected] 6 verbose lifecycle [email protected]~prestart: unsafe-perm in lifecycle true 7 verbose lifecycle [email protected]~prestart: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/[username]/Documents/MIM Practice/js-dev-env/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin 8 verbose lifecycle [email protected]~prestart: CWD: /Users/[username]/Documents/MIM Practice/js-dev-env 9 silly lifecycle [email protected]~prestart: Args: [ '-c', 'babel-node buildScripts/startMessage.js' ] 10 silly lifecycle [email protected]~prestart: Returned: code: 1 signal: null 11 info lifecycle [email protected]~prestart: Failed to exec prestart script 12 verbose stack Error: [email protected] prestart: babel-node buildScripts/startMessage.js12 verbose stack Exit status 1 12 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16) 12 verbose stack at emitTwo (events.js:106:13) 12 verbose stack at EventEmitter.emit (events.js:191:7) 12 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14) 12 verbose stack at emitTwo (events.js:106:13) 12 verbose stack at ChildProcess.emit (events.js:191:7) 12 verbose stack at maybeClose (internal/child_process.js:920:16) 12 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:230:5) 13 verbose pkgid [email protected] 14 verbose cwd /Users/[username]/Documents/MIM Practice/js-dev-env 15 error Darwin 17.0.0 16 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" 17 error node v6.11.3 18 error npm v3.10.10 19 error code ELIFECYCLE 20 error [email protected] prestart:babel-node buildScripts/startMessage.js20 error Exit status 1 21 error Failed at the [email protected] prestart script 'babel-node buildScripts/startMessage.js'. 21 error Make sure you have the latest version of node.js and npm installed. 21 error If you do, this is most likely a problem with the javascript-development-environment package, 21 error not with npm itself. 21 error Tell the author that this fails on your system: 21 error babel-node buildScripts/startMessage.js 21 error You can get information on how to open an issue for this project with: 21 error npm bugs javascript-development-environment 21 error Or if that isn't available, you can get their info via: 21 error npm owner ls javascript-development-environment 21 error There is likely additional logging output above. 22 verbose exit [ 1, true ]

Missing Surge in package.json

This is the repo I pulled, and it is missing. I think there was a repo with similar name on your profile that did have surge in the package.json

I'll install using npm surge and add it globally for now. Let me know if I should revert any of those actions

Demo doesn't run in Internet Explorer

There are two known issues in Internet Explorer (IE):

IE lacks native Promise support, so you need to add a promise polyfill to get the demo to work in IE.
IE tries to download the JSON from the mock API at localhost:3001/users. Here are some workarounds.

embeddedjs.com is dead

New URL: https://ejs.co/

dynamic html generation problem with webpack 3

really appreciate your efforts and the information given within course. love it.

i followed course and wanted to use it in my react app whereas I used all latest perhaps except webpack, currently I am using webpack 3. did some minor changes in webpack config you mentioned earlier.
however strange thing is going on with injecting the <script tag src="bundle.js" dynamically when I am trying different routes except "/" i.e. public path.

for instance if i have

"/" => it injects the <script src="bundle.js"/>

"/seasons" => nothing is injected

not sure what is the reason, i thought maybe React-Router 4.0 is failing but I think it is actually from configuration things to do with HtmlWebpackPlugin. Since bundle.js not being injected.

Earlier I used in my old application two separate template files( dev, prod) so in production one i can do code splitting

please can you give me hand to identify my problem. for now I get back to my old configuration.
the video only shows generic configuration without putting React maybe i am doing something wrong.

npm test error

[email protected] test G:\Pluralsight-JsDevEnv
mocha --reporter progress buildScripts/testSetup.js "src/**/*.test.js"

Warning: Could not find any test files matching pattern: src/**/*.test.js
0 passing (2ms)

Why does this give 0 passing?

Getting TypeError: results.forEach is not a function

Hi Cory,
First of all I would like to thank you very much for your wonderful course.
Although it's not suite for my developing level, it is very fruitful and it push me up the developing scale, hopefully one day to become an expert like you.

Now I am having the same issue of "TypeError: result.forEach is not a function..",
and I do not understand what should I set result to ? and how to solve this issue.
Very appreciate your assistant.

Meanwhile I solved it using regular for loop, but i would like to understand why it's not working as it should.
Thanks
Yigal

branch update-2019 README: add description how to merge with master. dotfiles gone

Thanks for creating the branch update-2019. I have and enhancement and a bug (missing dotfiles)

I have cloned the master branch of the repo https://github.com/coryhouse/javascript-development-environment like this:

git clone https://github.com/coryhouse/javascript-development-environment
git pull origin update-2019

Is this the correct sequence of git commands?

If so, it is not obvious from the README. (please add such a paragraph)
If this is indeed correct (npm run build -s succeeds, tests are fine, the app runs with node 10, on localhost:3000 and localhost 3001), then this paragraph from the README is misleading:

Make sure files with names that begin with a dot (.babelrc, .editorconfig, .eslintrc) are copied to the project directory root. This is easy to overlook if you copy this repository manually.

...because these dot-files are gone after the merge:

.babelrc no longer exists, has been moved into into package.json (I'm fine with that)
but .editorconfig, .eslintrc are gone (because they are not included in this branch)

I think .editorconfig, .eslintrc should be re-added to this branch. But maybe you have a better idea?

Getting unhandled error event on npm start

Just cloned and installed deps and when i run npm start I get this...

> babel-node buildScripts/generateMockData


events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::3000
    at Object.exports._errnoException (util.js:1026:11)
    at exports._exceptionWithHostPort (util.js:1049:20)
    at Server._listen2 (net.js:1257:14)
    at listen (net.js:1293:10)
    at Server.listen (net.js:1389:5)
    at EventEmitter.listen (/Users/jaredw/Sites/_play/javascript-development-environment/node_modules/express/lib/application.js:617:24)
    at Object.<anonymous> (/Users/jaredw/Sites/_play/javascript-development-environment/buildScripts/srcServer.js:31:5)
    at Module._compile (module.js:570:32)
    at loader (/Users/jaredw/Sites/_play/javascript-development-environment/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/jaredw/Sites/_play/javascript-development-environment/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Function.Module.runMain (module.js:604:10)
    at /Users/jaredw/Sites/_play/javascript-development-environment/node_modules/babel-cli/lib/_babel-node.js:159:24
    at Object.<anonymous> (/Users/jaredw/Sites/_play/javascript-development-environment/node_modules/babel-cli/lib/_babel-node.js:160:7)

update devDependencies List/Table in README

In the README, md file, the devDependencies Table seems to be slightly out of sync with the devDependencies associative array in package.json

I found explanations for these to be missing in the table in README.md

chai
chalk
compression
html-webpack-plugin
json-schema-faker
json-server
localtunnel
nock
numeral
webpack-md5-hash

After running npm install, 've found these module directories to be missing in node_modules/ dir,
but they are mentioned in the README.

eventsource-polyfill
expect
file-loader
url-loader

Maybe they are hidden inside different directory names. (I am not too familiar with the node ecosystem, and I didn't look to closely. )

Webpack 4 Issues with config.prod.js

With webpack 4 out, there are some config.prod.js file issues.

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

With webpack updating often, any chance of an updated config and how to handle the module: { loaders: [] } issue? 😄

For splitChunks and UglifyJsPlugin I removed the original reference and updated it to:

  optimization: {
    splitChunks: {
      cacheGroups: {
        // disables the default definition of these cache groups
        vendors: false,
        default: false
      }
    },
    minimizer: [
      new UglifyJsPlugin({ /* your config */ })
    ]
  }

Now my full webpack.config.prod.js file looks like:

import webpack from 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import WebpackMd5Hash from 'webpack-md5-hash';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

export default {
  resolve: {
    extensions: ['*', '.js', '.jsx', '.json']
  },
  devtool: 'source-map',
  entry: {
    vendor: path.resolve(__dirname, 'src/vendor'),
    main: path.resolve(__dirname, 'src/index')
  },
  target: 'web',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].[chunkhash].js'
  },
  plugins: [
    // Global loader configuration
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false,
      noInfo: true // set to false to see a list of every file being bundled.
    }),

    // Generate an external css file with a hash in the filename
    new ExtractTextPlugin('[name].[contenthash].css'),

    // Hash the files using MD5 so that their names change when the content changes.
    new WebpackMd5Hash(),

    // Create HTML file that includes reference to bundled JS.
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
      inject: true,
      // Properties you define here are available in index.html
      // using htmlWebpackPlugin.options.varName
      trackJSToken: 'INSERT YOUR TOKEN HERE'
    })
  ],
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader']},
      {test: /\.css$/, loader: ExtractTextPlugin.extract('css-loader?sourceMap')}
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        // disables the default definition of these cache groups
        vendors: false,
        default: false
      }
    },
    minimizer: [
      new UglifyJsPlugin({ /* your config */ })
    ]
  }
};

node_modules\open\lib\open.js:62 return s.replace(/"/g, '\\\"'); TypeError: s.replace is not a function

Hi, I really like the course, but encountered a problem almost on beginning.
When running node buildScripts/srcServer.js from module 5, clip 3 (Development Web Server : Demo: Set up Express) I get this error:

C:\projects\js-environment>node buildScripts/srcServer.js
C:\projects\js-environment\node_modules\open\lib\open.js:62
  return s.replace(/"/g, '\\\"');
           ^

TypeError: s.replace is not a function
    at escape (C:\projects\js-environment\node_modules\open\lib\open.js:62:12)
    at open (C:\projects\js-environment\node_modules\open\lib\open.js:40:31)
    at Server.<anonymous> (C:\projects\js-environment\buildScripts\srcServer.js:17:9)
    at Object.onceWrapper (events.js:286:20)
    at Server.emit (events.js:198:13)
    at emitListeningNT (net.js:1313:10)
    at process._tickCallback (internal/process/next_tick.js:63:19)
    at Function.Module.runMain (internal/modules/cjs/loader.js:832:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

Code here: https://github.com/piatkiewicz/js-environment/tree/openjs62-error
Node version is v10.16.0

Could someone help me with that?

Tweak list

Add callouts that nsp is no more
Switch to babel-preset-env "Babel-preset-env has replaced babel-preset-latest.
New versions of webpack now support an environment setting. See the update pull request here for details: xxx
Update the list of JS versions to say what came in 2017 and 2018 (in transpiling module)
Clarify via callout in Transpiling module "Demo: Set up Babel" that babel-node actually calls the babel-cli package.
Add callout on npm install page: "Be sure to use the exact versions I specify to assure you can follow along with the course. When you're done, I'm maintaining a GitHub repo here that shows how to tweak the final course exercise to use the latest versions of all packages."

Review update PR for other opportunities.

Switch to latest Heroku stack

https://devcenter.heroku.com/articles/upgrading-to-the-latest-stack

See email they sent me too.

Getting TypeError: results.forEach is not a function

Hi Cory,
I was following your course on pluralsight but facing an issue using Fetch
My repo
https://github.com/Nileshbirari/pluralsight-js-dev-env

TypeError: results.forEach is not a function when I am trying to load localhost:3000
When I run localhost:3000/users I get to see the list of users correctly

npm start doesn't work

`> [email protected] start G:\Pluralsight-JsDevEnv

node buildScripts/srcServer.js

events.js:160
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE :::3000
at Object.exports._errnoException (util.js:1022:11)
at exports._exceptionWithHostPort (util.js:1045:20)
at Server._listen2 (net.js:1259:14)
at listen (net.js:1295:10)
at Server.listen (net.js:1391:5)
at EventEmitter.listen (G:\Pluralsight-JsDevEnv\node_modules\express\lib\application.js:617:24)
at Object. (G:\Pluralsight-JsDevEnv\buildScripts\srcServer.js:11:5)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: node buildScripts/srcServer.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node buildScripts/srcServer.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the javascript-development-environment package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node buildScripts/srcServer.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs javascript-development-environment
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls javascript-development-environment
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! G:\Pluralsight-JsDevEnv\npm-debug.log`

When I do npm start, it creates a debug.log fie with the same errors.

Module 4: nsp - but Node Security Platform service is shutting down 9/30 2018

After cloning this repo and doing npm install I just got this output on the command line:

npm WARN deprecated [email protected]: The Node Security Platform service is shutting down 9/30
See official announcement on npm blog

npm now automatically reviews every install request against the NSP vulnerability database and warns you if you try to use unsafe code. Additionally, beginning with npm@6, a new command, npm audit, recursively analyzes your dependency trees to identify specifically what’s insecure, recommend a replacement, or fix it automatically with npm audit fix.

Can you update the README of the repo, or maybe even the pluralsight course video. Perhaps create a fly-in banner that tells users what to do instead of ? (I know that maybe that's not possible)

Error with nsp check,

After following all the details on your repository, I got a lot of warnings that all versions of rpm are deprecated and by run the nsp check command I got the same error I got after setting my environment so I can't start my browser to see all results, please help because this course is so exciting to follow,
$ nsp check
(+) Client request error: getaddrinfo ENOTFOUND api.nodesecurity.io api.nodesecurity.io:443

`npm run lint` failing on osx

I'm following along with the Building a JavaScript Development Environment Pluralsight course, Linting chapter - Demo video. I just modified package.json and added .eslintrc.json

Running npm run lint produces an error, and creates the attached npm-debug.log file.

There are no spaces in any directories in my projects path. Can you advise?

npm-debug.txt

Error: The style-loader cannot be used in a non-browser environment

Hi Cory, after resolving the previous command by comparing/contrasting code from your final project code, I am now receiving this error. Have you come across it before?

> npm run start

> [email protected] prestart /Users/bxberry/dev/js-dev-env/pluralsight-js-dev-env
> babel-node buildScripts/startMessage.js

Starting app in dev mode...

> [email protected] start /Users/bxberry/dev/js-dev-env/pluralsight-js-dev-env
> npm-run-all --parallel security-check lint:watch open:src


> [email protected] security-check /Users/bxberry/dev/js-dev-env/pluralsight-js-dev-env
> nsp check


> [email protected] lint:watch /Users/bxberry/dev/js-dev-env/pluralsight-js-dev-env
> npm run lint -- --watch


> [email protected] open:src /Users/bxberry/dev/js-dev-env/pluralsight-js-dev-env
> babel-node buildScripts/srcServer.js


> [email protected] lint /Users/bxberry/dev/js-dev-env/pluralsight-js-dev-env
> esw webpack.config.* src buildScripts --color "--watch"

(+) No known vulnerabilities found
✓ Clean (8:09:08 PM)
Hash: bac25d0a7ccc9b2c43c3
Version: webpack 1.13.2
Time: 841ms
     Asset     Size  Chunks             Chunk Names
 bundle.js  95.3 kB       0  [emitted]  main
index.html  1.09 kB          [emitted]
chunk    {0} bundle.js (main) 34.1 kB [rendered]
    [0] multi main 28 bytes {0} [built]
    [1] ./src/index.js 395 bytes {0} [built]
    [2] ./src/index.css 907 bytes {0} [built]
    [3] ./~/css-loader!./src/index.css 229 bytes {0} [built]
    [4] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
    [5] ./~/style-loader/addStyles.js 7.15 kB {0} [built]
    [6] ./~/numeral/numeral.js 23.9 kB {0} [built]

ERROR in   Error: The style-loader cannot be used in a non-browser environment

  - index.js:185 module.exports
    /Users/bxberry/dev/js-dev-env/pluralsight-js-dev-env/src/index.js:185:43

  - index.js:71 Object.<anonymous>
    /Users/bxberry/dev/js-dev-env/pluralsight-js-dev-env/src/index.js:71:37

  - index.js:21 __webpack_require__
    /Users/bxberry/dev/js-dev-env/pluralsight-js-dev-env/src/index.js:21:30

  - index.js:50 Object.<anonymous>
    /Users/bxberry/dev/js-dev-env/pluralsight-js-dev-env/src/index.js:50:2

  - index.js:21 __webpack_require__
    /Users/bxberry/dev/js-dev-env/pluralsight-js-dev-env/src/index.js:21:30

  - index.js:41
    /Users/bxberry/dev/js-dev-env/pluralsight-js-dev-env/src/index.js:41:18

  - index.js:44
    /Users/bxberry/dev/js-dev-env/pluralsight-js-dev-env/src/index.js:44:10

  - index.js:225 HtmlWebpackPlugin.evaluateCompilationResult
    [pluralsight-js-dev-env]/[html-webpack-plugin]/index.js:225:26

  - index.js:115
    [pluralsight-js-dev-env]/[html-webpack-plugin]/index.js:115:21


Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  36.9 kB       0
    chunk    {0} index.html 34.1 kB [rendered]
        [0] ./~/html-webpack-plugin/lib/loader.js!./src/index.js 395 bytes {0} [built]
        [1] ./src/index.css 907 bytes {0} [built]
        [2] ./~/css-loader!./src/index.css 229 bytes {0} [built]
        [3] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
        [4] ./~/style-loader/addStyles.js 7.15 kB {0} [built]
        [5] ./~/numeral/numeral.js 23.9 kB {0} [built]

esw is not working

Cory, I am going through the Pluralsight class. I just got to the point of the "npm run lint" and everything has gone south. I have tried googling and I saw you had something like this issue in one of your other repos. Any ideas? Window 10. Thought the fix was going to Node 5.5.x? Not sure if that is good for the rest of the class. I also have the same issue on Ubuntu 14.04.
Thanks Brian

C:\Git\js-dev-env\pluralsight-js-dev-env>npm run lint

[email protected] lint C:\Git\js-dev-env\pluralsight-js-dev-env
esw webpack.config.* src buildScrips --color

C:\Git\js-dev-env\pluralsight-js-dev-env\src\index.js (1/1)
✖ 5:1 Unexpected 'debugger' statement no-debugger
! 6:1 Unexpected console statement no-console

✖ 1 error ! 1 warning (11:27:15 PM)
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "lint"
npm ERR! node v6.9.4
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] lint: esw webpack.config.* src buildScrips --color
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] lint script 'esw webpack.config.* src buildScrips --color'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the javascript-development-environment package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! esw webpack.config.* src buildScrips --color
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs javascript-development-environment
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls javascript-development-environment
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Git\js-dev-env\pluralsight-js-dev-env\npm-debug.log

C:\Git\js-dev-env\pluralsight-js-dev-env>

Any chance of a Webpack 2 version?

Really enjoyed the course - however I'm having serious difficulties upgrading the starter kit to use Webpack 2.2. I've read through the migration and tried tweaking the babel configuration, but I'm not having much luck so far.

Any chance of creating a branch with an upgraded webpack.config file (and associated amends)?

Error: Running babel-node

Running anything in the script with babel-node throws an error.
"/node_modules/babel-core/lib/transformation/file/logger.js:41
throw new Constructor(this._buildMessage(msg));"

Using node version 7.9.0

Pluralsight: Bundling - Demo Create App Entry Point

Hi Cory,

When running npm start, after seeing "(+) No known vulnerabilities found" i'm seeing the following output:

\pluralsight-js-dev-env\webpack.config.dev.js:2
import path from 'path';
^^^^^^

SyntaxError: Unexpected token import
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at loader (\pluralsight-js-dev-env\node_modules\babel-register\lib\node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (\Pluralsight\pluralsight-js-dev-env\node_modules\babel-register\lib\node.js:154:7)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)

What am I doing wrong?

Run the versions I specify in the course

You need to run the versions I specify in the course to follow along with the course. When you run npm install, you will receive warnings. You can ignore the warnings. It will run fine. To switch to the versions I specify in the course, do this:

Delete node_modules
Copy the dependencies and devDependencies from the package.json that I provide in the course
Run this to install dependencies: npm install
Once you complete the course, I show how to update to the latest versions here.

security-check fails

nsp check
(+) Client request error: getaddrinfo ENOTFOUND api.nodesecurity.io api.nodesecurity.io:443

(running nsp check here on it's own just to show the error)

distServer.js and compression order doesn't work for me unless swapped

This worked for me, and I think the video shows the same. But Github version shows it swapped. I don't know if this matters or not because I haven't finished the video. And what I mean not working is bundle.js wasn't being compressed.

app.use(compression());
app.use(express.static('dist'));

coryhouse / javascript-development-environment Goto Github PK