The webpack.config.js file feels quite messy and has nearly no structure. I've been trying to get some additional stuff working, like being able to bundle fonts through Webpack, so Open Sans doesn't need to be loaded through Googles CDN for example (people might be using JARVIS while working offline), see the index.html file.

I'm no expert, but I feel I can definitely clean up the config and create a logical structure for Webpack and the npm/yarn commands for building/testing.

Would this be a good PR? I'd love to help out.

See this issue on why: socketio/engine.io#388
And here how: https://github.com/socketio/engine.io#methods

Hey guys,
I was trying to set up locally Jarvis, but I ran into two issues

There are two servers launched in parallel, is this wanted?
localhost:3000 and localhost:1337
https://www.dropbox.com/s/5l7j90ttjhug4ao/Capture%20d%27%C3%A9cran%202018-01-16%2010.28.41.png?dl=0

The "dev" one seems to be on :3000, but it seems broken:

• Missing CSS file
• Lot of NaN
• No bundles listed

https://www.dropbox.com/s/g2j0a1ch2hptwo7/Capture%20d%27%C3%A9cran%202018-01-16%2010.29.55.png?dl=0

Steps to reproduce:

• git clone ...
• npm install
• npm run dev

Am I missing something?
Thanks!

First off this lib is absolutely stunning 😍, great work. I noticed in my modules section that the scroll breaks through towards the end. Attaching a gif for ya. Not a huge deal breaker - but figured it could be a good issue for someone.

Prettier, husky and lint-staged would be a great addition to this repo to format the code when the user make a commit.

Ideally, everything inside src should be formatted.

Read more about:

• Husky
• Lint staged

variables Sass folder should have all the theme colour variations

config Sass file should map the theme variables to Jarvis specific variable names we use, I know sounds complicated but to explained further:

// variables.scss
// Belongs to the theme author not me
// Can have whatever names you want
// Go crazy

$sky-blue-aqua-color: #ccccc;
$tomato-red-error: #0f0f0f;

// config.scss
// Is what Jarvis uses
// Please map your theme colours to our colours here

@import 'theme-fantastic/variables.scss';

$color-dashboard-bg: $sky-blue-aqua-color;
etc..

Here's a starting point.

Currently the lib directory is marked in the .gitignore folder

It looks like because the lib directory is being used as the dist folder by the webpack config in Jarvis atm

Unfortunately IDEs like Atom try to be clever, and don't bother showing you files/folders that are in the .gitignore - meaning that any Atom users (not sure how many other IDEs do this, I wouldn't be surprised if it's a few though, tbh) won't see the lib directory without having to manually edit out the lib entry from the .gitignore

This confused me for like 5 minutes when I first cloned Jarvis to contribute 😅

The current CSS structure does not really support creating new themes.

Currently, in the src/client/styles folder, there is a themes/default folder. The files in there are always loaded and used as the theme. There is no way to make a new theme without either not loading the default theme or loading the default theme AND a new theme, having your own theme overrule the default css variables.

Also there is no way to tell JARVIS what theme to use when instantiating in a Webpack config.
Wouldn't it be great like this:

new Jarvis({
    theme: 'light'
});

What is the expected way for someone to make a theme? I have some idea's but I'd be wasting time if you already have work in progress for this.

This would be really nice because I don't have it as the active tab all the time :)

I think many people would love having the output of a linter such as eslint and/or stylelint in the dashboard. I know it is already implemented fairly good into text editors but I would still love this feature. I will try making a PR soon but if there are any other ideas that are related to this please let me know!

Maybe it doesn't have to be a linter only but rather having the option to specify something like

new Jarvis({
    customCommands: [
        "eslint src --fix",
        "jest test"
    ]
})

And those command then each run on after build via require('child_process').exec and their output gets shown in individual tabs/sections in Jarvis.

/Users/xxxx/do-app-server/node_modules/webpack-jarvis/bin/plugin/index.js:23
let projectInfo = {
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

A bunch of these show up and there is also an error thrown for initializing a default value for function parameters

/Users/xxxx/do-app-server/node_modules/webpack-jarvis/bin/plugin/reporter-util.js:21
function _formattedError(errors = []) {

Adding 'use strict'; and initializing the function parameter if 'null' seems to compile everything properly. Shall I submit a pull request?

We currently support Node6+ we need to set that in package.json engines option! details

not sure why. Tested on production build

new Jarvis({
      port: 3001,
      keepAlive: true,
    }),

[email protected]

Not sure which one it is :p

https://github.com/FormidableLabs/electron-webpack-dashboard

The webpack.config.js allows a functional definition to be used, receiving an env.

Right now, when passing a custom, functional --config to Jarvis, it will fail because config hasn't been instantiated yet.

webpack-jarvis/dist/server/webpack/compiler.js:29
    if (config.entry.length) {
                    ^

TypeError: Cannot read property 'length' of undefined

To match webpack parity, the env value in the compiler should be an object.

Related: #20

Reference: Webpack: Environment Variables

The client side app need some organisation, CSS wise at first.

current bad practice:
We have styles split in components folders and shared style folder

better practice:
clean the shared style folder and keep only:

• shared mixins

• shared grid

• shared colour variables

• keep each component style next to it.

We need to pass any devServer Configs from the user to the webpackDevServer constructor function in the 2nd argument.

In repo https://github.com/sergeysova/InstaClone/tree/feature/jarvis

Run webpack-dev-server with npm script dev:webpack or npx webpack --watch.

Next I see:

But if I try to open http://localhost:3005, jarvis crashes:

same crash with npx webpack --watch.

Node: 8.9.4
Webpack: 3.11.0
macOS: 10.13.4 Beta

https://github.com/sergeysova/InstaClone/blob/feature/jarvis/package.json#L82-L93

jarvis fails to start when used along with a webpack config that does not use the DefinePlugin.

This due to the index.js#L59.

definePlugin["definitions"] is undefined when DefinePlugin is not used.

Hej @zouhir,

when a colleague and me were shown this project, we liked it, but were a bit confused, why you decided to use images as the heading for each section.
It prevents accessibility, and you also can't share a link to an anchor tag, that GitHub usually auto-generates.

I see the value in using HTML due to the center formatting (afaik that's not possible otherwise) but would avoid it if not absolutely necessary.

As I assume this was a deliberate (design) choice you took, I wanted to ask first, whether you would be up for a PR using plain Markdown headings (##) for this, before just opening one.

Very eager to see how the project elvoves!

We just have a .babelrc file:

{
  "presets": ["react-native"],
  "plugins": ["transform-object-rest-spread"]
}

Would it be possible to setup Jarvis with this?

There is some overlapping text and icons in the modules section for long paths. See the screenshot attached.

Don't get me wrong, I love the pink gradient, it's refreshing to not stare at a black console window for a change...

That being said, it would be awesome if the dashboard could be themed, e.g. to support corporate branding. This would make it a much easier sale towards mgmt for super serious customer projects. :-)

Port 1337 is a commonly used port (like Tunnelblick). One should be able to config it.

Hi,

considering that I am a newbie on partecipating on these open source project, I am some noob question to start to have a look the code and having some testing of this application.

As I forked and cloned the app I run:
npm install

Which are the next steps in order to start the application locally as
npm start
is not working?

Thank you in advance and for the patience.

Hi! As the title says i would like to know if this plugin supports the multicompilers mode of webpack;
I have multiple entries but i can make this plugin works only for one.
Anyone can help me?
Thanks

Just a very minor thing that I noticed - There's a few ways to do the author field in a package.json file, however Jarvis doesn't really utilise them all consistently.

The standard way, which obviously works.

"author": "Kevin Østerkilde"

Shorthand works too, but not quite as expected as it's all intepreted as a string.

"author": "Kevin Østerkilde <[email protected]> (https://oesterkilde.dk/)"

And lastly the tedious way - It doesn't work at all.

"author": {
    "name": "Kevin Østerkilde",
    "email": "[email protected]",
    "url": "https://oesterkilde.dk/"
  }

Anyway, keep up the great work!

I was trying to get a dev. environment for Jarvis up and running yesterday to submit a PR. Note that I haven't worked on Webpack plugins so far, so the points below may be totally idiotic.

However, I had some issues getting started, and maybe some other people are facing the same problems. Pointing them out in order to make getting started with contributing a little simpler for them. 👌

• How do I run Jarvis in a test/sandbox environment? Kicking off the dev server via npm run dev does launch the dashboard at port 3000, however completely without data, which makes testing it somewhat pointless.
• I tried to create a sample webpack project to integrate the dev instance of Jarvis, however Webpack doesn't seem to follow symlinks to plugins, so npm link ... seems out of question.
• Trying to build Jarvis via npm run build (on Windows) failed due to some extra apostrophes in the scripts section of package.json: Error: Cannot find module 'C:\git\jarvis\'.\src\client\webpack.config.js''. Removing the apostrophes resolves the issue. Is that a bug, or just an issue with my environment?
• Trying to run dashboard the locally built version of Jarvis fails, opening it in Chrome results in the following error: Uncaught SyntaxError: Unexpected token <. It seems like Chrome is trying to execute the index.html file as a JS file? Could that be caused by the way the files are served by polka?

Maybe someone can shed some light on those points. If so, having a quick getting started guide may be helpful, perhaps in the read-me or contributing.md?

Right now, there is no way to change what IP/host the HTTP server listens to.

I have Webpack + JARVIS running on a server in my network, but because there's no option to change what IP the JARVIS HTTP server listens to, it is inaccessible from devices in the network.

Reading the server.js and index.js in your src folder, it seems it can be achieved quite simply, so I tried to fork+pull request but am not able to properly build your code through the commands in the package.json (you have 2 of these btw, 1 in the root and 1 in the src folder).

Perhaps you can point me in the right direction or make a contribution guide, I'd be happy to add this myself and submit it through a pull request, but can't do that if I can't build and test it.

Thanks!

Output console style should be fixed.
If add css rule white-space: pre to <span> symbols >^ will be at the right place but have too many empty space before

Not sure if its a Webpack thing or JARVIS thing, but here it is.

Currently I'm using a environment variable JARVIS & to include it I use a boolean true

Complete example is https://github.com/deadcoder0904/webpack-exam

So my questions is -

Is there any way I can refactor the line https://github.com/deadcoder0904/webpack-exam/blob/master/package.json#L8 to not send JARVIS=true as environment variable ? What I mean by this is if I am using webpack-dev-server in the script use jarvis & if I'm using webpack in the script don't use it without using env variable JARVIS.

Also, I think examples might help this repo to make it better. Like simple example with dev, prod & base config working with jarvis & complex one working with express, etc...

I will be happy to contribute 😉

Hi!

I'm using Jarvis with webpack 3.11.
It's perfectly working on dev but not on prod.

I get the follow Jarvis console message in both environment: [JARVIS] Starting dashboard on: http://localhost:3003

I'm able to navigate to this url on dev environment but in prod I get the following message in browser:

I run Stickler-CI which is a service aimed at improving code quality by simplifying code review by automating code feedback in pull requests.

We just launched auto-fixing for JavaScript through pull request commits. As a JavaScript open source project, our service will save you time and brain power by automatically fixing style errors.

If you are interested in trying out our product, we can submit a pull request with the configuration file, but a maintainer will need to enable webhooks by logging into https://stickler-ci.com and enabling the webhook.

Thank you!

How to use it with react-scripts where you don't necessarily have the config file?

const Jarvis = require('webpack-jarvis');

/* the rest of your webpack configs */

plugins: [
new Jarvis({
port: 1337 // optional: set a port
})
]

The NodeJS service should run via webpack-dev-server only when --dev flag exist in CLI arguments.

At the moment it always run the compiler with that option because it's not configured to make a --prod bundles yet.

Hi!

I really like Jarvis design and feedback it gives but I miss some options:

• option to open Jarvis webserver on first build (on - off)
• option to choose the amount of log in console (full - light - none)

What do you think about it?

When you see --prd flag create & emit prod bundle.

Hej man listen. I'm amazed by its beauty 💅 . Love you 🌹.

Just wanted to know how you made that screenshot?

Thanks 🙏 👏 .

For me, the big value proposition here is the dashboard itself. I maintain another webpack-based build tool called Neutrino, and it would be super-handy to be able to utilize a top-notch dashboard during development without having to lose of all our build-chain for it.

Would you be willing to take a PR to support this? If so, could you point me in the right direction for how you think it could be consumed externally?

You can see from the picture above.In 4G mode,what's mean that 171s and +166s?

Can we add OSS NINJA and get rid of the LICENCE file.

When they user asks us to set performance budget:

1- we should notify the NodeJS though either POST http request or through the io socket.

2- create default performance budget object with default values.

3- object assign it to Configs.

4- rerun the compiler

❔ question mark: should we write the configs for performance budget on the user's filesystem in their webpack configs or in jarvis.configs?