No production output

[mattkibbler]

Hi!

I have set up a small test pattern library with Swanky Docs and can view my work using swanky.devServer, but when I use swanky.build as per the Swanky docs here nothing happens, I don't get any output in the console and no files are generated in the docs directory.

Am I missing something?

[mattkibbler]

Ok, so I figured out that the build method mentioned in the docs simply returns a config that you need to pass into webpack, however, running webpack index.js resulted in an error.

Instead, I used:

'use strict';

const webpack = require("webpack");
const build = require('swanky').build;

// Retrieve webpack build configuration
var config = build({
	configPath: "swanky.config.json"
});

webpack(config, function(err,stats){
	
});

[Rodney Leviton]

Hi @mattkibbler - thank you for giving the docs a try. I can see they are in some need of TLC to bring them up to scratch (I will create an issue to review the step by step guide). For the time being the swanky-cli is a quick way to get everything working with the minimal boilerplate. Have you tried it?

[mattkibbler]

Thanks for the response, @rodleviton, I think Swanky Docs is really nice from what I've seen so far.

I'm giving the CLI a try, though it has been stuck on "installing packages" for 10 minutes now.

[Rodney Leviton]

The 10 minutes part does not sound right. Can I suggest:

1. Force quitting the npm or yarn install (ctrl + c)
2. Delete your node_modules folder
3. Manually install dependencies again e.g. npm i or yarn i

hope that works for you.

[mattkibbler]

Ok, that sorted things, thanks. I'm not sure why it got stuck.

The CLI tool is very helpful, though the build.prod.js file that is generated has the same issue that it generates the webpack config, but doesn't say what to do with it.

It makes perfect sense when you have a poke through the source, but a quick note in the docs would help point people in the right direction.

[Rodney Leviton]

Good to hear. Agree with you that the docs need to be updated to explain this point better (I have created and issue to capture this). Are you now able to build a static site by running npm run build?

[mattkibbler]

Yep, that worked perfectly. Thanks very much for your help.

[brimwd]

I have the same issue @mattkibbler had: my CLI install hung on installing packages. Per your instructions, @rodleviton, I killed the process, deleted the node_modules folder, and rebuilt it with npm i. At the end of that rebuild I get a warning npm WARN uxsg@ No repository field. (uxsg is the name of my project)

If I then use npm run build I get the following error in ./src/docs.js, ./src/snippets/colour-drop/index.js, and ./src/themes/uxsg-theme/index.js:

Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/briandonahue"

I also get the following npm errors:

npm ERR! uxsg@ build: `NODE_ENV=production webpack -p --progress --config src/config/build/build.prod.js --profile --colors`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the uxsg@ build script 'NODE_ENV=production webpack -p --progress --config src/config/build/build.prod.js --profile --colors'.
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 uxsg package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     NODE_ENV=production webpack -p --progress --config src/config/build/build.prod.js --profile --colors

Finally, I have an npm-debug.log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/7.6.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using npm@4.1.2
3 info using node@v7.6.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle uxsg@~prebuild: uxsg@
6 verbose lifecycle uxsg@~prebuild: unsafe-perm in lifecycle true
7 verbose lifecycle uxsg@~prebuild: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/briandonahue/Web/swanky/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
8 verbose lifecycle uxsg@~prebuild: CWD: /Users/briandonahue/Web/swanky
9 silly lifecycle uxsg@~prebuild: Args: [ '-c', 'rimraf docs/' ]
10 silly lifecycle uxsg@~prebuild: Returned: code: 0  signal: null
11 info lifecycle uxsg@~build: uxsg@
12 verbose lifecycle uxsg@~build: unsafe-perm in lifecycle true
13 verbose lifecycle uxsg@~build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/briandonahue/Web/swanky/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
14 verbose lifecycle uxsg@~build: CWD: /Users/briandonahue/Web/swanky
15 silly lifecycle uxsg@~build: Args: [ '-c',
15 silly lifecycle   'NODE_ENV=production webpack -p --progress --config src/config/build/build.prod.js --profile --colors' ]
16 silly lifecycle uxsg@~build: Returned: code: 2  signal: null
17 info lifecycle uxsg@~build: Failed to exec build script
18 verbose stack Error: uxsg@ build: `NODE_ENV=production webpack -p --progress --config src/config/build/build.prod.js --profile --colors`
18 verbose stack Exit status 2
18 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
18 verbose stack     at emitTwo (events.js:106:13)
18 verbose stack     at EventEmitter.emit (events.js:192:7)
18 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
18 verbose stack     at emitTwo (events.js:106:13)
18 verbose stack     at ChildProcess.emit (events.js:192:7)
18 verbose stack     at maybeClose (internal/child_process.js:890:16)
18 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
19 verbose pkgid uxsg@
20 verbose cwd /Users/briandonahue/Web/swanky
21 error Darwin 16.7.0
22 error argv "/usr/local/Cellar/node/7.6.0/bin/node" "/usr/local/bin/npm" "run" "build"
23 error node v7.6.0
24 error npm  v4.1.2
25 error code ELIFECYCLE
26 error uxsg@ build: `NODE_ENV=production webpack -p --progress --config src/config/build/build.prod.js --profile --colors`
26 error Exit status 2
27 error Failed at the uxsg@ build script 'NODE_ENV=production webpack -p --progress --config src/config/build/build.prod.js --profile --colors'.
27 error Make sure you have the latest version of node.js and npm installed.
27 error If you do, this is most likely a problem with the uxsg package,
27 error not with npm itself.
27 error Tell the author that this fails on your system:
27 error     NODE_ENV=production webpack -p --progress --config src/config/build/build.prod.js --profile --colors
27 error You can get information on how to open an issue for this project with:
27 error     npm bugs uxsg
27 error Or if that isn't available, you can get their info via:
27 error     npm owner ls uxsg
27 error There is likely additional logging output above.
28 verbose exit [ 1, true ]

If I re-run swanky and build a new site, it runs without issue, and then starting the service with npm start opens a page at localhost:3000 that looks like this (shrunk for the sake of file size):

Any ideas on what I can do to fix this? My node install is managed by homebrew and is up to date.

[Rodney Leviton]

It appears that when the system uses npm instead of yarn to install dependencies the installation task is hanging. I created a fix for this here. If you can please update to the latest CLI version and let me know if this fixes your issue.

[brimwd]

After upgrading, the installer no longer hangs (yay!), but my final product is still broken.
The install produced '���' in the the following tree areas: (my site is called 'uxsg')

⠏ installing packagesuxsg@ /Users/...
├─┬ swanky@4.1.0
│ ├─┬ browser-sync@2.18.8
│   ├─┬ browser-sync-ui@0.6.3 
│   | └─┬ weinre@2.0.0-pre-I0Z7U9OV 
│   |   ��npm WARN  uxsg@ No repository field.
│   |   �─┬ express@2.5.11 
│   |
│   ├─┬ micromatch@2.3.11 
│     ├���┬ arr-diff@2.0.0 
│
└─┬ webpack@2.7.0
  └─┬ yargs@6.4.0 
    ├─��� which-module@1.0.0 

and ended with:

✓ installing packages
✓ New site created successfully.

--- update ---

I deleted the swanky folder and started again from scratch. This time I got the same 'No repository field' warning, but otherwise the only place with the ��� was:

├─┬ swanky@4.1.0 
│ ├─┬ request@2.80.0 
│   ├���─ forever-agent@0.6.1 

I realized this time (after running npm start) that there's no CSS output anywhere in the src folder, and instead all I have are .styl files. Do I need a styl compiler that isn't included as one of the dependencies / packages? Is it possible my installation completed without some obvious component like that?

[Rodney Leviton]

@brimwd using the CLI to create the initial site boilerplate should give you everything you need to run an instance of Swanky. Also when running a dev instance using npm start you will not see any files written to disk e.g. compiled css as we are using Webpack which compiles and generates these files in memory. You will only ever see the generated assets when building the site using npm run build. The 'no repository field' warning will not cause any build issues. Without being able to reproduce the issue that you are seeing this is going to be difficult to troubleshoot. My versions of Node are installed via nvm which is a node version manager. I wonder if installing Node via homebrew is the difference. I will try and get a clean machine and mirror your node setup.

When running the site and inspecting via dev tools do you see any errors?

[brimwd]

@rodleviton I was on a deadline at work, so I gave up on using Swanky and went with Fabricator instead.

I don't remember seeing any errors in the inspector, but the pages always loaded without any sort of CSS.

I appreciate the help you were able to offer.

[Rodney Leviton]

@brimwd completely understandable. Thanks for giving it a try and I hope I can make the getting started process more seamless in the future.

Fabricator is a great alternative.