How to setup Aurelia + standard webpack (without @easy-webpack)

[nashwaan]

UPDATE 13-Apr-2017: With the latest update to the skeleton, the info in this post is NOT useful anymore.

UPDATE 3-Nov-2016: For a better version of this guide, see this or this.

---

Ok, this is not an issue any more for me. But I thought it will help someone.

Here is the process of setting up Aurelia + standard webpack based on the Aurelia official webpack skeleton.

After downloading skeleton-esnext-webpack from Aurelia github, we need to replace any reference to @easy-webpack with the standard webpack modules.

In package.json, remove all modules that starts with @easy-webpack in "devDependencies":

    "@easy-webpack/config-aurelia": "^2.0.1",
    "@easy-webpack/config-babel": "^2.0.2",
    "@easy-webpack/config-common-chunks-simple": "^2.0.1",
    "@easy-webpack/config-copy-files": "^1.0.0",
    "@easy-webpack/config-css": "^2.3.2",
    "@easy-webpack/config-env-development": "^2.1.1",
    "@easy-webpack/config-env-production": "^2.1.0",
    "@easy-webpack/config-external-source-maps": "^2.0.1",
    "@easy-webpack/config-fonts-and-images": "^1.2.1",
    "@easy-webpack/config-generate-index-html": "^2.0.1",
    "@easy-webpack/config-global-bluebird": "^1.2.0",
    "@easy-webpack/config-global-jquery": "^1.2.0",
    "@easy-webpack/config-global-regenerator": "^1.2.0",
    "@easy-webpack/config-html": "^2.0.2",
    "@easy-webpack/config-json": "^2.0.2",
    "@easy-webpack/config-test-coverage-istanbul": "^2.0.2",
    "@easy-webpack/config-uglify": "^2.1.0",
    "@easy-webpack/core": "^1.3.2",

and replace them with the following:

    "aurelia-webpack-plugin": "^1.1.0",
    "copy-webpack-plugin": "^3.0.1",
    "html-webpack-plugin": "^2.22.0",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-polyfill": "^6.16.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.4",
    "sourcemap-istanbul-instrumenter-loader": "^0.2.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",

and use the following content for webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var project = require('./package.json');

const DEBUG = true;
const title = 'Aurelia Navigation Skeleton';
const baseUrl = '/';
const rootDir = path.resolve();
const srcDir = path.resolve('src');
const outDir = path.resolve('dist');

const aureliaBootstrap = [
    'aurelia-bootstrapper-webpack',
    'aurelia-polyfills',
    'aurelia-pal-browser',
    'regenerator-runtime',
];

const aureliaModules = Object.keys(project.dependencies).filter(dep => dep.startsWith('aurelia-'));

module.exports = {
    //debug: true,
    //devtool: 'source-map',
    entry: {
        'app': [], // <-- this array will be filled by the aurelia-webpack-plugin
        'aurelia-bootstrap': aureliaBootstrap,
        'aurelia-modules': aureliaModules.filter(pkg => aureliaBootstrap.indexOf(pkg) === -1)
    },
    output: {
        path: outDir,
        filename: '[name]-bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/, // include: path.resolve('src'),
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'stage-1'],
                    plugins: ['transform-decorators-legacy']
                }
            }, {
                test: /\.html$/,
                exclude: /index\.html$/,
                loader: 'html-loader'
            }, {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            }, {
                test: /\.(png|jpe?g|gif|svg|eot|woff|woff2|ttf)(\?\S*)?$/,
                loader: 'url-loader?limit=100000&name=[name].[ext]'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            regeneratorRuntime: 'regenerator-runtime', // to support await/async syntax
            Promise: 'bluebird', // because Edge browser has slow native Promise object
            $: 'jquery', // because 'bootstrap' by Twitter depends on this
            jQuery: 'jquery', // just an alias
            'window.jQuery': 'jquery' // this doesn't expose jQuery property for window, but exposes it to every module
        }),
        new HtmlWebpackPlugin({
            title: title,
            template: 'index.html',
            chunksSortMode: 'dependency'
        }),
        new AureliaWebpackPlugin({
            root: rootDir,
            src: srcDir,
            title: title,
            baseUrl: baseUrl
        }),
        new CopyWebpackPlugin([{
            from: 'favicon.ico',
            to: 'favicon.ico'
        }]),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['aurelia-modules', 'aurelia-bootstrap']
        }),
        /*new webpack.optimize.UglifyJsPlugin({
            beautify: DEBUG ? true : false,
            mangle: DEBUG ? false : {screw_ie8 : true, keep_fnames: true},
            dead_code: DEBUG ? false : true,
            unused: DEBUG ? false : true,
            deadCode: DEBUG ? false : true,
            comments: DEBUG ? true : false,
            compress: {
                screw_ie8: true,
                keep_fnames: true,
                drop_debugger: false,
                dead_code: false,
                unused: false,
                warnings: DEBUG ? true : false
            }
        }),*/
    ]
};

Now index.html need to be adjusted a little bit:

<!DOCTYPE html>
<html>
  <head>
    <title><%- htmlWebpackPlugin.options.title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="<%- htmlWebpackPlugin.options.baseUrl %>">
    <!-- imported CSS are concatenated and added automatically -->
  </head>
  <body aurelia-app="main">
    <div class="splash">
      <div class="message"><%- htmlWebpackPlugin.options.title %></div>
      <i class="fa fa-spinner fa-spin"></i>
    </div>
    <% if (webpackConfig.debug) { %>
    <!-- Webpack Dev Server reload -->
    <script src="/webpack-dev-server.js"></script>
    <% } %>
  </body>
</html>

After these steps, you can do the normal npm install and run npm start.

Hope this will help someone who wants to use the standard webpack rather than @easy-webpack.

[bigopon]

Attempted to do this once but couldn't finish. Glad you did. Thanks !

[niieani]

Thanks, we would happily accept a PR to put this into our Webpack-related docs on the Hub if you like.

[EisenbergEffect]

@nashwaan We would love to have this in the official documentation! If you want to create a markdown file and PR it into the docs folder of the framework, I can fix it up and get it into the docs.

[nashwaan]

@niieani @EisenbergEffect Thank you both for your feedback.
I would really love to help in the documentation but I don't think I should do this because I have recently started to learn Aurelia and webpack. Of course, you can put these instructions in the doc if that can help.

But I do have an important comment on this regard. Probably the most important two reasons why Aurelia has a big competitive advantage over other frameworks are: 1) Convention over Configuration 2) Strive for standards.

Well, these are true for Aurelia framework, but not for the suggested build systems.

First, aurelia-cli is not a standard scaffolding system. Yes it tries to simplify things, but all the setup and the generated config files and folders are aurelia specific (not used by any other projects).
Second, webpack skeleton is based on @easy-webpack which is not standard. I see the idea behind this abstraction but it should not be there by default. This abstraction layer is not standard and unnecessary and it also makes aurelia looks very alien in the webpack world. Otherwise, someone can create @easy-peesy-webpack to consolidate all @easy-webpack modules for further abstraction!

I would strongly suggest to focus on supporting the build based on standard webpack and obselete aurelia-cli and @easy-webpack. I think this will make Aurelia more standards-compliant and easier to adopt as some people are already familiar with new de facto build system, webpack.

[bigopon]

@niieani @EisenbergEffect @nashwaan
I could take it. I struggled so much when trying to add additional tasks into "easy"-webpack, and in fact gotta dig into the source code to see what options are available for me, so I would love to give a hand here.

[EisenbergEffect]

@nashwaan We aren't going to obsolete the CLI. There are too many customers who love it even it its alpha form. Also, there is no standard project setup. There's no standard for that sort of thing and every platform, build system, framework, etc. does it differently. There's literally no common standard we could even try to adhere to.

The problem with webpack is that it's configuration is terrible. It's one of the best modern examples I know of bad API design. Easy Webpack is a project that attempt to improve that a bit. It's not perfect because it's working on top of the flaws that exist in Webpack's design. Bazyli is working on a new webpack setup to improve things in the future.

We have customers that like the CLI and we have customers that like Webpack. We support both and are always looking for ways to improve things. There isn't any kind of standard around this aspect of application development though.

[niieani]

Hopefully we can integrate Webpack into the CLI, which will generate "raw" Webpack config files, and perhaps have the choice of easy-webpack as an option only. Webpack was recently working hard at improving the way you configure it, so that's bound to improve. The new Webpack docs are finally what they should've been.

Eventually we want to get rid of skeletons in favor of good generators, which the CLI, essentially is. Nothing will stop you from creating your own, community driven skeletons, though. React community has their own skeleton, just as the Angular2 community has one. Maintaining them has been a real drag on our resources, so favoring the CLI will, in part, be a solution to that problem.

@EisenbergEffect if you feel the CLI is ready to add support for Webpack, I could base the new setup on integrating it into it.

[nashwaan]

@EisenbergEffect I agree to your points. I though webpack will dominate the professional-grade frontend build system for the coming few years by looking at the power of what webpack can achieve (not how to achieve).

It's one of the best modern examples I know of bad API design

Ouch.

@niieani I really love your idea about integrating webpack directly in the CLI. That would definitely add another perspective to the CLI. Thank you for coming up with a middle ground solution. Can't wait to see this one implemented.

[EisenbergEffect]

Absolutely the plan is to integrate Webpack into the CLI.

On Oct 6, 2016 11:52 AM, "Yousuf" notifications@github.com wrote:

@EisenbergEffect https://github.com/EisenbergEffect I agree to your
points. I though webpack will dominate the professional-grade frontend
build system for the coming few years by looking at the power of what
webpack can achieve (not how to achieve).

It's one of the best modern examples I know of bad API design

Ouch.

@niieani https://github.com/niieani I really love your idea about
integrating webpack directly in the CLI. That would definitely add another
perspective to the CLI. A huge upvote from me.
Yes, the documentations are getting

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#688 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAIBna3quirOC5dCz3mo2ngg4Fytt4wtks5qxUNlgaJpZM4KOoft
.

[boazblake]

@nashwaan does the loading animation still work for you with this setup?

[nashwaan]

Sorry, never tried to do animation with aurelia yet. But maybe @bigopon can help you as he has expanded the above setup.

[smithaitufe]

@nashwaan Please I tried to use your suggestion. I got the following error when I ran npm start

c:\Directory\Dev\aurelia\skeleton-esnext-webpack>npm install
npm WARN install Couldn't install optional dependency: Unsupported
aurelia-skeleton-navigation-webpack@1.0.1 c:\Directory\Dev\aurelia\skeleton-esnext-webpack
├─┬ @easy-webpack/config-fonts-and-images@1.2.1
│ └── file-loader@0.8.5
├─┬ aurelia-webpack-plugin@1.1.0
│ └─┬ loader-utils@0.2.16
│   └── emojis-list@2.1.0
├── babel-polyfill@6.16.0
└── file-loader@0.9.0


c:\Directory\Dev\aurelia\skeleton-esnext-webpack>npm start

> aurelia-skeleton-navigation-webpack@1.0.1 start c:\Directory\Dev\aurelia\skeleton-esnext-webpack
> npm run server:dev


> aurelia-skeleton-navigation-webpack@1.0.1 server:dev c:\Directory\Dev\aurelia\skeleton-esnext-webpack
> cross-env NODE_ENV=development node ./node_modules/webpack-dev-server/bin/webpack-dev-server --inline --progress --profile --watch

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

Error: listen EACCES 127.0.0.1:8080
    at Object.exports._errnoException (util.js:856:11)
    at exports._exceptionWithHostPort (util.js:879:20)
    at Server._listen2 (net.js:1223:19)
    at listen (net.js:1272:10)
    at net.js:1381:9
    at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:63:16)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:82:10)

npm ERR! Windows_NT 6.2.9200
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "server:dev"
npm ERR! node v5.5.0
npm ERR! npm  v3.3.12
npm ERR! code ELIFECYCLE
npm ERR! aurelia-skeleton-navigation-webpack@1.0.1 server:dev: `cross-env NODE_ENV=development node ./node_modules/webpack-dev-server/bin/webpack-dev-server --inline --progress --profile --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the aurelia-skeleton-navigation-webpack@1.0.1 server:dev script 'cross-env NODE_ENV=development node ./node_modules/webpack-dev-server/bin/webpack-dev-server --inline --progress --profile --watch'.
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 aurelia-skeleton-navigation-webpack package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development node ./node_modules/webpack-dev-server/bin/webpack-dev-server --inline --progress --profile --watch
npm ERR! You can get their info via:
npm ERR!     npm owner ls aurelia-skeleton-navigation-webpack
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     c:\Directory\Dev\aurelia\skeleton-esnext-webpack\npm-debug.log

npm ERR! Windows_NT 6.2.9200
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v5.5.0
npm ERR! npm  v3.3.12
npm ERR! code ELIFECYCLE
npm ERR! aurelia-skeleton-navigation-webpack@1.0.1 start: `npm run server:dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the aurelia-skeleton-navigation-webpack@1.0.1 start script 'npm run server:dev'.
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 aurelia-skeleton-navigation-webpack package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run server:dev
npm ERR! You can get their info via:
npm ERR!     npm owner ls aurelia-skeleton-navigation-webpack
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     c:\Directory\Dev\aurelia\skeleton-esnext-webpack\npm-debug.log

Please what could I have missed

[niieani]

@smithaitufe

Error: listen EACCES 127.0.0.1:8080
    at Object.exports._errnoException (util.js:856:11)

Seems like you already have something else listening on port 8080. Try changing the port of the dev server.

[smithaitufe]

@niieani Thanks a lot for your quick response. I changed the port number and it is working now. I really appreciate.

[smithaitufe]

I know this is not the right place to discuss this issue but I will appreciate if I can be helped from here. I am using the latest skeleton I guess. I was not having this issue in previous versions. When I click on a link to a route, it doesn't load the module rather it throws an error that the module could not be found. But when I refresh or go to my editor to save, which of course causes a reload, the page will appear. That error will not show again. What please is the issue? How do I resolve this? This is slowing me down. I have asked for help in the aurelia gitter forum but no one is answering me. I even tagged jsobell but no response yet. It frustrating me

[Thanood]

@smithaitufe Maybe your route link doesn't match a route. But it's really hard to say without seeing it.

[smithaitufe]

@Thanood Thanks but how do you explain that on page refresh, the module is loaded? I think this issue has to do with the version of aurelia-webpack-loader. I will check the previous versions of skeleton that worked for me and probably downgrade.

[smithaitufe]

@Thanood Sorry I meant to aurelia-webpack-plugin version 1.1.0. I am not the only one complaining about this. Check out this link

[Thanood]

Yes, you're right. I've overlooked that.
If you can track it down to 1.1.0 maybe it's best if you create another issue.

Other than that, no idea, sorry.

[smithaitufe]

@Thanood

I have downgraded it to 1.0.0 beta 4.0.1 but it didn't work. It was throwing error due to Aurelia-validation library. I will create an issue. But do you know the skeleton releases or tag that works with the most recent version of the Aurelia validation library?

[Thanood]

I think I did some validation with 1.0.0 but that's been a while and I didn't find the repo where I did that.

[kingsleyh]

I can't agree more with @nashwaan in terms of easy-webpack. I struggled with easy-webpack for hours to get something so simple as to be able to use an inline image in the src of an image tag. I still could not get it to work and all the docs only give examples of ES6 and react syntax which don't work in Aurelia. The documentation for easy-webpack is non existent - if you want to see what any sub package does - like @easy-webpack/config-fonts-and-images for example - all the github projects have zero documentation - so how are you supposed to know how to configure it?

If you are new to webpack - I find easy-webpack utterly impossible to adust the config.

I totally agree with @nashwaan in that there should be a regular webpack skeleton available for idiots like me who just can't understand how to configure the nuances of easy-webpack.

I'm very happy @nashwaan provided this migration path from easy-webpack to regular webpack and I would suggest - replacing the existing skeleton or adding an additional skeleton that has regular webpack.

[niieani]

@kingsleyh There will be an experimental version of webpack skeleton coming in the next few days that has fixes for over 20 issues related to Webpack support for Aurelia. It will not use Easy-Webpack's config packages.

[kingsleyh]

That would be totally awesome - because I'm still struggling to get my project running :) I'm looking forward to it.

[nashwaan]

@kingsleyh Please ensure that you have checked an improved version of this guide in here or here.

[nashwaan]

@niieani That's a really good news. I also wonder when the cli will support webpack.

[insidewhy]

I've just converted a project from systemjs to webpack which was a tonne of trouble due to lack of documentation. I also don't like the @easy-webpack stuff, abstraction layers can be great when they are documented. An undocumented abstraction layer is another layer of indirection and complication without any win. It made my porting work more time consuming and difficult yet the result is less readable.

[EisenbergEffect]

There is a new version of our webpack stuff coming soon and some new docs
in the works as well.

On Nov 7, 2016 5:31 PM, "Mr Friend" notifications@github.com wrote:

I've just converted a project from systemjs to webpack which was a tonne
of trouble due to lack of documentation. I also don't like the
@easy-webpack stuff, abstraction layers can be great when they are
documented. An undocumented abstraction layer is another layer of
indirection and complication without any win. It made my porting work more
time consuming and difficult yet the result is less readable.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#688 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAIBnURq9qXAsjfX_q8eLx-mNe7AHw0Uks5q79DTgaJpZM4KOoft
.

[svenvandescheur]

I strongly feel that Aurelia should move to a more "standard" WebPack configuration as multiple user have reported that the "easy" webpack configuration is far from easy.

Webpack may not be perfect, but abstracting it into a fairly unknown blackbox makes most of the documentation of Webpack useless.

Aurelia is a very powerful platform but the distribution and build toolchain need loads of simplification. If I already have a default (webpack) project. How do I "npm install Aurelia" and get started, just like any other project?

My suggestions are:

• Provide better documentation how to install Aurelia in existing workflows.
• Drop easy-webpack and provide a more familiar configuration.

[Thanood]

While I support this effort to demonstrate a "standard" way to produce a webpack app, I'd just like to "salt" the discussion a bit by saying that easy-webpack actually helped me (a complete webpack noob) understand what's going on.

Although I do have some problems now understanding what WebpackModuleWithMetadata is and where that metadata actually comes from ( 😉 ) I'm grateful for easy-webpack as a starting ground. I understand that this can actually be easily more confusing to people with previous webpack experience as I noticed myself. I'm now a little more experienced and find the "standard" way easier to read.

Apart from that, easy-webpack also showed me how to modularize a webpack config myself and give standardized config artifacts to the people I work with. I don't think it should go away. Maybe complementary to the standard webpack config.

[niieani]

I humbly acknowledge all the positive and negative comments about easy-webpack. The new, experimental webpack skeleton will not use easy-webpack in the form that is present today, it will expose all the raw configuration elements, so it's easy both to customize for advanced users, and to get started, for beginners.

[niieani]

#714 should close this issue. No more @easy-webpack configs, it's all flat and dandy. We'll need to add more comments to each section, but otherwise, it should be much clearer now.

🎱 webpack.config.

Comments are welcome.

[kingsleyh]

Hi - I grabbed the skeleton-typescript-webpack-experimental and tried to run npm install and then npm start - however it complains of the following warnings:

npm WARN ts-jest@17.0.0 requires a peer of typescript@~2.0.6 but none was installed.
npm WARN webpack-dev-server@2.1.0-beta.12 requires a peer of webpack@^2.1.0-beta.26 but none was installed.

consequently the dev-server won't start up. Any advice on how to fix this?

[niieani]

Hi @kingsleyh skeleton-typescript-webpack-experimental is not yet released. Right now it won't work without manually building and linking its dependencies, because they were not merged and released yet.

[kingsleyh]

Hi - oh I See - so then where is the typescript webapack skeleton I should be trying out that does not use easy-webpack?

[niieani]

@kingsleyh not there yet. Hang in there for a couple more days.

[kingsleyh]

ok - thanks I'll check back in a few days then.

[rajajhansi]

@niieani I found easy-webpack very helpful because it abstracted the complexities of webpack. If there is a way to use standard webpack.config.js without that abstraction and that's what the community is leaning towards, I think it is a great idea to to move towards that with the experimental-skeleton. With the current master branch, source maps are again going off by a line or two causing major annoyance during debugging. Should we wait for the experimental-skeleton to be released? I've been asking for webpack to be integrated to the aurelia-cli from the day the cli was released. It is easier to ask :) I understand that the core team members and community are doing a great job. Thank you so much for listening to our feedback and addressing them. aurelia-cli generating a standard webpack.config.js would be the ultimate and the right thing to do. It is very annoying to get latest from skeleton-webpack and diff the delta and update my project which was built using this skeleton. I'll have to do the same with aurelia-cli generated projects as well but can save a git clone :)

[rajajhansi]

@niieani, @EisenbergEffect , Could you please provide an update on the future of aurelia-webpack-skeleton and easy-webpack? We started our project with an older version of this skeleton project. While I like the idea of Aurelia trying to support require.js via aurelia CLI and webpack using the skeleton projects, it causes lot of issues because the direction is unclear. If you guys have decided to ship a webpack.config.js without easy-webpack, please do so because that would help many who are already using webpack. For all the goodness in Aurelia, we don't want this startup/skeleton projects to be a pain. At least please provide an update or let us know if we should stick with a working version of aurelia-skeleton-webpack project using easy-webpack for now. I totally understand that this is an open source project and please don't misunderstand that I'm trying to be pushy here.

[EisenbergEffect]

We are going to support webpack, require.js and system.js. We're currently working on an improved webpack setup. That's being done in a skeleton project. Once that is ready to go, we'll merge that into the CLI so that you can use the CLI to create either a webpack setup of a require.js setup. Eventually, we'll also add system.js support to the CLI as well.

We have a very diverse community, so we want to support all the major build and bundling technologies. We're working on parallel efforts to enable that, hoping to bring it all into the CLI.

[mikeesouth]

@EisenbergEffect and @niieani is there any progress on the new webpack setup? the skeleton-typescript-webpack have not been updated for quite some time and I can't really find any progress on the new webpack support.

[ne0guille]

i just downloaded the typescript-wepack-experimental skeleton but its also not working yet

[activebiz]

Not working for me either. 😞

[sbolel]

I just cloned the repo and checked out the webpack-experimental branch on a fresh install of OSX and it works as expected.

@ne0guille @activebiz :

• What version of node and npm are you using?
• Are you on the webpack-experimental branch?

---

• I'm using node 7.6.0 and npm 4.2.0
• I switched to node 6.10.0 and that's fine too

[activebiz]

I am using
npm: 3.10.6
Node: 7.5.0

and yes I am using webpack-experimental branch.

`
skeleton-typescript-webpack-experimental@1.0.0 start C:\skeleton-navigation\skeleton-typescript-webpack-experimental
bnr webpack:dashboard

unning better-npm-run in C:\skeleton-navigation\skeleton-typescript-webpack-experimental
xecuting script: webpack:dashboard

o be executed: "$LOCAL/webpack-dashboard -- $LOCAL/webpack-dev-server --hot --inline --open"
$LOCAL' is not recognized as an internal or external command,
perable program or batch file.

pm ERR! Windows_NT 10.0.14393
pm ERR! argv "C:\Program Files (x86)\nodejs\node.exe" "C:\Users\\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "st
pm ERR! node v7.5.0
pm ERR! npm v3.10.6
pm ERR! code ELIFECYCLE
pm ERR! skeleton-typescript-webpack-experimental@1.0.0 start: bnr webpack:dashboard
pm ERR! Exit status 1
pm ERR!
pm ERR! Failed at the skeleton-typescript-webpack-experimental@1.0.0 start script 'bnr webpack:dashboard'.
pm ERR! Make sure you have the latest version of node.js and npm installed.
pm ERR! If you do, this is most likely a problem with the skeleton-typescript-webpack-experimental package,
pm ERR! not with npm itself.
pm ERR! Tell the author that this fails on your system:
pm ERR! bnr webpack:dashboard
pm ERR! You can get information on how to open an issue for this project with:
pm ERR! npm bugs skeleton-typescript-webpack-experimental
pm ERR! Or if that isn't available, you can get their info via:
pm ERR! npm owner ls skeleton-typescript-webpack-experimental
pm ERR! There is likely additional logging output above.

pm ERR! Please include the following file with any support request:`

Thanks

[activebiz]

I switched to node v7.6.0 and npm v4.2.0 but no luck. Might be something to do with windows?

Does looks like something do with mac/windows env.

"betterScripts": {
"test": "$NODE $LOCAL/jest --no-cache",
....

[sbolel]

@activebiz that'd be my guess. Can you try running:

C:\skeleton-navigation\skeleton-typescript-webpack-experimental\node_modules\.bin\webpack-dev-server --hot --inline --open

EDIT: @activebiz I'm guessing that 👍 means you got it to work.

[ne0guille]

@sbolel im using node v6.9.1 and npm 3.7.5 also trying in the webpack-experimental branch

[activebiz]

That did worked. really liked the dashboard stuff. Hope it will work for windows when PR done in master. Any idea regarding timeline about when this will be merged into master?

[sbolel]

@activebiz I think npm should be accounting for this if set up properly on Windows.

For now, you can replace all the environment variables in package.json (those that start with $) to work for windows so that, for example,$LOCAL --> %LOCAL%. Change the / to \. You can also use absolute paths for the scripts instead of the environment variables. It's been a while since I've worked with Windows, so I apologize I don't have a better answer at the moment.

& I'm not a good person to ask about the timeline -- I have no idea 😅

[niieani]

Fixed by #714. No more easy-webpack and the config is relatively simple.

[dkent600]

I just downloaded the webpack+typescript skeleton from here: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-webpack/1

and it is still using easy-webpack. :-(

(not only that, but when I build it, it fails, doesn't compile. just sayin').

[JoshuaVSherman]

Their documentation is out of date with link here is where to go https://github.com/aurelia/skeleton-navigation

…

On Fri, Oct 13, 2017 at 10:01 AM, Doug Kent ***@***.***> wrote: I just downloaded the webpack+typescript skeleton from here: http://aurelia.io/hub.html#/doc/article/aurelia/framework/ latest/setup-webpack/1 and it is still using easy-webpack. :-( (not only that, but when I build it, it fails, doesn't compile. just sayin'). — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#688 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMuN2Je0_3pvUX1Us7fTxbE9bd0LJJHRks5sr21FgaJpZM4KOoft> .

-- Josh Sherman https://web-jam.com https://www.linkedin.com/in/joshuavsherman/ 540-494-8035