Sage 9 + webpack

ash · June 21, 2016, 4:07pm

I’ve also downloaded a fresh install of Sage9 and this too is not loading any of the changes to the browser.

@patrickv have you come across this before?

patrickv · June 21, 2016, 4:25pm

Not really. Have you updated assets/config.json? With dev url + theme name/path in publicPath?

ash · June 21, 2016, 4:33pm

I’ve not changed it at all. It has always been …

{
  "context": "assets",
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "output": {
    "path": "dist",
    "publicPath": "/allgood/wp-content/themes/cloud9-starter-2016/dist/"
  },
  "devUrl": "http://localhost.com/allgood/",
  "devPort": 3000
}

But it does nothing now.

The ‘watch’ sees the changes in files, but nothing is sent to the browser to load the files. If I run npm run build it compiles the files fine, but the watch sends nothing to the browser at all.

I’ve reinstalled node.js, npm, composer, sage the lot and nothing seems to fix the issue.

I would be very grateful for any help you could give.

ash · June 22, 2016, 10:11am

Hi Guys,

I’m still having issues with this. I’ve just done a clean install on a different Mac and just using the Sage 9 branch fresh with no changes to any of the core files other than config.json which looks like this …

{
  "context": "assets",
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "output": {
    "path": "dist",
    "publicPath": "/starter-website/themes/sage/dist/"
  },
  "devUrl": "http://localhost/starter-website/",
  "devPort": 3000
}

If I run ‘npm run watch’ any changes I make triggers webpack do compile, but those changes ( just the css & js, HTML works ) never enter the browser.

I can run ‘npm run build’ and the files are complied to the /dist/ directory without issue, but as you would expect this is not what I’m looking for from a working workflow.

Can anyone please help?

cfx · June 22, 2016, 11:59am

Your publicPath appears to be invalid. If you’re running Bedrock it should most likely match the default. If you’re not running Bedrock then it needs to point to your theme’s dist directory, probably /wp-content/themes/%THEME_NAME%/dist.

ash · June 22, 2016, 12:11pm

@cfx Thanks for your help. With trouble shooting this with me. Actually I think it’s the devport number it was set to 3000, but the page loading in the browser was using 3002, I changed the port number in the config to 3002 and it seems to be working now.

Is there anyway to automate this to ensure this doesn’t happen in the future?

cfx · June 22, 2016, 12:24pm

Glad you got it.

There’s no way to automate it that I’m aware of and really no need for one, it just needs to be configured properly. The best way to do that is to stop any npm tasks and make sure that you have a way to view your static dev environment (in your case it would be entering http://localhost:3002/starter-website into your address bar). If that URI changes then just ensure you reflect those changes in the devUrl, devPort, and publicPath properties configured in your config.json.

ash · June 22, 2016, 1:00pm

Sure, but the port number was not being displayed in my address bar for some reason, so I couldn’t have spotted ti that way. I just took a guess and it paid off.

cfx · June 22, 2016, 1:28pm

Your AMPPS setup most likely factors into that port number so you’ll need to take it into account.

nathanielks · June 24, 2016, 11:25pm

Any further thoughts on this? I came to realize in development that asset_path won’t work for images because they’re not picked up by webpack in development.

patrickv · June 25, 2016, 2:56pm

Simply import images you need to require with asset_path by listing them in your scripts/main.js.

import '../images/teacup.jpg';

They will then be optimized and copied to dist/images/*

emzo · July 1, 2016, 2:02pm

Playing around with Sage 9, and slightly confused. Everything seems to be working just fine, but when I do npm run watch and view the site via BrowserSync proxy at http://localhost:3000, devtools reports a missing stylesheet: http://localhost:3000/wp-content/themes/sage-9/dist/styles/main.css

Sure enough, when I look, the dist directory is missing from the theme directory, however, my styles are showing up just fine. If I edit some CSS, the changes are injected into the browser just fine, and everything renders correctly

I’m running a plain WP install - no Bedrock this time. The site is served using MAMP ( I know, I know) at http://mysage9site.local.

I believe I’ve configured things properly in my theme’s assets/config.json:

{
  "context": "assets",
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "output": {
    "path": "dist",
    "publicPath": "/wp-content/themes/sage-9/dist/"
  },
  "devUrl": "http://mysage9site.local",
  "devPort": 3000
}

If i do npm run build, the dist directory is created and populated fine.

Any ideas what’s going on here?

patrickv · July 1, 2016, 9:06pm

It’s the expected behavior.
watch inline css in the javascript file, so the main.css does not exist.
When running npm run watch, files are served from memory and are not on the hard drive. That’s why there is not dist folder .

I hope that answers your questions.

emzo · July 2, 2016, 11:33am

Ah, thanks for the explanation @patrickv - makes sense now. So it’s normal to see a 404 in devtools with regards to the main.css stylesheet in Sage 9. This is my first foray into webpack land - lots of new stuff to learn!

timothy_m_alber · July 28, 2016, 6:09pm

When I run npm run watch I am getting the following with no assets loading on the local environment - would appreciate any help!

[sage9] npm run watch

sage@9.0.0 watch /Users/timalbert/Sites/valet/undergraduate.northeastern/web/app/themes/sage9
node watch.js --watch

clean-webpack-plugin: /Users/timalbert/Sites/valet/undergraduate.northeastern/web/app/themes/sage9/dist has been removed.
[BS] Proxying: http://undergraduate.northeastern.dev
[BS] Access URLs:
   Local: http://localhost:3002
External: http://10.107.24.118:3002
      UI: http://localhost:3001
UI External: http://10.107.24.118:3001

[BS] Watching files…
Hash: 3a41d09117528cff4bca
Version: webpack 1.13.1
Time: 3681ms
Asset Size Chunks Chunk Names
scripts/main.js 520 kB 0 main
scripts/customizer.js 110 kB 1 customizer
scripts/main.js.map 524 kB 0 main
scripts/customizer.js.map 112 kB 1 customizer
chunk {0} scripts/main.js, scripts/main.js.map (main) 489 kB [rendered]
[0] multi main 52 bytes {0} [built]
[1] ./~/html-entities/lib/html5-entities.js 49 kB {0} {1} [built]
[2] ./~/ansi-html/index.js 4.02 kB {0} {1} [built]
[3] ./~/ansi-regex/index.js 135 bytes {0} {1} [built]
[4] ./~/css-loader?+sourceMap!./~/postcss-loader!./~/resolve-url-loader?+sourceMap!./~/sass-loader?+sourceMap!./assets/styles/main.scss 377 kB {0} [built]
[5] ./~/html-entities/index.js 231 bytes {0} {1} [built]
[6] ./~/html-entities/lib/html4-entities.js 6.57 kB {0} {1} [built]
[7] ./~/html-entities/lib/xml-entities.js 2.98 kB {0} {1} [built]
[8] ./~/querystring/decode.js 2.4 kB {0} {1} [built]
[9] ./~/querystring/encode.js 2.09 kB {0} {1} [built]
[10] ./~/querystring/index.js 127 bytes {0} {1} [built]
[11] ./~/strip-ansi/index.js 161 bytes {0} {1} [built]
[12] (webpack)-hot-middleware/client-overlay.js 1.74 kB {0} {1} [built]
[13] (webpack)-hot-middleware/client.js?timeout=20000&reload=true 4.49 kB {0} {1} [built]
[14] (webpack)-hot-middleware/process-update.js 3.88 kB {0} {1} [built]
[15] (webpack)/buildin/module.js 251 bytes {0} {1} [built]
[16] external “jQuery” 42 bytes {0} {1} [not cacheable]
[17] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[18] ./assets/styles/main.scss 1.43 kB {0} [built]
[20] ./assets/scripts/main.js 5.31 kB {0} [built] [11 errors]
[21] ./assets/scripts/routes/About.js 3.93 kB {0} [built]
[22] ./assets/scripts/routes/Common.js 4.03 kB {0} [built]
[23] ./assets/scripts/routes/Home.js 4.03 kB {0} [built]
[24] ./assets/scripts/util/router.js 6.11 kB {0} [built]
[25] ./~/style-loader/addStyles.js 7.15 kB {0} [built]
chunk {1} scripts/customizer.js, scripts/customizer.js.map (customizer) 82.2 kB [rendered]
[0] multi customizer 40 bytes {1} [built]
[1] ./~/html-entities/lib/html5-entities.js 49 kB {0} {1} [built]
[2] ./~/ansi-html/index.js 4.02 kB {0} {1} [built]
[3] ./~/ansi-regex/index.js 135 bytes {0} {1} [built]
[5] ./~/html-entities/index.js 231 bytes {0} {1} [built]
[6] ./~/html-entities/lib/html4-entities.js 6.57 kB {0} {1} [built]
[7] ./~/html-entities/lib/xml-entities.js 2.98 kB {0} {1} [built]
[8] ./~/querystring/decode.js 2.4 kB {0} {1} [built]
[9] ./~/querystring/encode.js 2.09 kB {0} {1} [built]
[10] ./~/querystring/index.js 127 bytes {0} {1} [built]
[11] ./~/strip-ansi/index.js 161 bytes {0} {1} [built]
[12] (webpack)-hot-middleware/client-overlay.js 1.74 kB {0} {1} [built]
[13] (webpack)-hot-middleware/client.js?timeout=20000&reload=true 4.49 kB {0} {1} [built]
[14] (webpack)-hot-middleware/process-update.js 3.88 kB {0} {1} [built]
[15] (webpack)/buildin/module.js 251 bytes {0} {1} [built]
[16] external “jQuery” 42 bytes {0} {1} [not cacheable]
[19] ./assets/scripts/customizer.js 4.1 kB {1} [built]

webpack: bundle is now VALID.

patrickv · July 29, 2016, 1:23am

Are you visiting your development version at the browser-sync address (in your case : http://localhost:3002)? Assets won’t load in you visit the site at the .dev address unless you run “npm run build”, running “watch” don’t write them to the hard drive.

davekiss · August 3, 2016, 10:44pm

I had to make a few changes to the current Sage 9 HEAD to get npm watch working properly.

gist.github.com

https://gist.github.com/davekiss/757d0963a7589ca376613e4090ab5eb5

gistfile1.txt

#1. Update Bootstrap compatibility in /assets/scripts/main.js

// Import npm dependencies
// import 'bootstrap/dist/js/umd/util.js';
// import 'bootstrap/dist/js/umd/alert.js';
// import 'bootstrap/dist/js/umd/button.js';
// import 'bootstrap/dist/js/umd/carousel.js';
// import 'bootstrap/dist/js/umd/collapse.js';
// import 'bootstrap/dist/js/umd/dropdown.js';
// import 'bootstrap/dist/js/umd/modal.js';

This file has been truncated. show original

Twansparant · August 19, 2016, 12:32pm

Hey guys, any updates on the release of Sage 9?

I was wundering how I should reference to images from my assets that are not loaded through Sass/Css?

For example, I have this function that outputs an inline svg file:

public static function getInlineSVG($fileName) {
	$svg = file_get_contents(  \App\asset_path('images/'. $fileName) );
	return $svg;
}

In my Main.js I import my svg files like this:

// Import unreferenced images
import '../images/my-vector-file.svg';
import '../images/my-other-vector-file.svg';

But in npm run watch mode, the dist folder and thus my svg file does not exist, which causes Nginx timeout errors in this case.

The path to the svg is correct though (it outputs: http://example.dev/app/themes/sage/dist/images/my-vector-file.svg) and on npm run build the images are copied over to the dist folder, but how am I supposed to configure Webpack so it uses it’s internal url’s during watch?

Should I add the images folder in this line in the webpack.config.js:

// Internal variables
var scriptsFilename = (argv.release) ? 'scripts/[name]_[hash].js' : 'scripts/[name].js',
    stylesFilename = (argv.release) ? 'styles/[name]_[hash].css' : 'styles/[name].css',
    sourceMapQueryStr = (argv.release) ? '-sourceMap' : '+sourceMap',
    jsLoader,
    webpackConfig;

Thanks!

bezbeli · August 24, 2016, 7:12am

Hi, just tried to implement sage 9 + webpack and everything works as expected except, sage 9 rocks!!!

I have problem localizing script,

function add_exam_templates(){
$args = array(
    'post_type' => 'exams'
    );

$js_data = [];
$examQuery = new WP_Query($args);

while ($examQuery->have_posts()) {
    $examQuery->the_post();
    $js_data[] = array(
        'title'     => get_the_title(),
        'content'   => get_the_content()
        );
}

wp_enqueue_script('exam_js', 'mappScript', array('jquery'), null, true);
wp_localize_script( 'exam_js', 'mappScript', $js_data );
}
add_action('wp_footer', __NAMESPACE__ . '\\add_exam_templates');

this worked with last stable Sage but fails now, I’m using mappScript in routes/Common.js so it should be fired on every page, what am I doing wrong?

cfx · August 24, 2016, 7:55am

what am I doing wrong?

You’re not calling the function correctly.

Sage 9 + webpack

clean-webpack-plugin: /Users/timalbert/Sites/valet/undergraduate.northeastern/web/app/themes/sage9/dist has been removed. [BS] Proxying: http://undergraduate.northeastern.dev [BS] Access URLs:

UI External: http://10.107.24.118:3001

clean-webpack-plugin: /Users/timalbert/Sites/valet/undergraduate.northeastern/web/app/themes/sage9/dist has been removed.
[BS] Proxying: http://undergraduate.northeastern.dev
[BS] Access URLs: