working with webpack - managing Page based variables - what is best practice?

[Nicolaas Thiemen Francken - Sunny Side Up]

Hi

Aaron, aka uncle cheese, recommended us to work with webpack (https://webpack.github.io/).  We are now using this, but it is a pretty steep learning curve.  

I am curious to get a best practice recommendation for injecting DB variables (set through CMS) into JS... 

I will give you an example of how I used to do that and how I am rewriting this now.

Here is how I used to write JS:

https://gist.github.com/sunnysideup/dd633cc7cb5ee971879d2a44b2b47824#file-myjsfx-js-L9

And this is how I would inject custom variables:

https://gist.github.com/sunnysideup/dd633cc7cb5ee971879d2a44b2b47824#file-page-php-L12

ISSUE: This does not work with webpack (and similar set ups) because MyJSFx is not available in the global name space. 

New Method:

Now, I inject variables from PHP like this:

https://gist.github.com/sunnysideup/dd633cc7cb5ee971879d2a44b2b47824#file-page_v2-php-L10

and kick things into action using this piece of code

https://gist.github.com/sunnysideup/dd633cc7cb5ee971879d2a44b2b47824#file-myjsfx_v2-js-L106

also note:

https://gist.github.com/sunnysideup/dd633cc7cb5ee971879d2a44b2b47824#file-myjsfx_v2-js-L8

This works - but I wonder if it is a good solution.

As a bonus feature ;-) ...  here is a file that I use to block all requirements and save them within the web pack folder:

https://gist.github.com/sunnysideup/5e01107b919dc2a45ad78f35ddbd8c35

Again - my question: what is best practice for the code linked to above?  

THANK YOU 

Nicolaas

​PS possibly useful links:

• SS JS CODING CONVENTIONS: https://docs.silverstripe.org/en/4.0/getting_started/javascript_coding_conventions/
  
• SS JS IN CMS: https://docs.silverstripe.org/en/4.0/developer_guides/customising_the_admin_interface/cms_architecture/
• JS MODULES: https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc

​

[Stevie Mayhew]

We do similar things to inject JS variables from generated code. We steer completely clear of the Requirements::whatever files through and never ever include and JS that way, its all included via webpack.

Either its dumped into the page and cached, or we set up a simple API and call that to get the data as necessary. Another option is to set `data-` attributes on the element which is the root of your JS component. We do this a lot when using react standalone components.

So a component looks like:

`<div id="MyJSComponent" data-firstname="{$FirstName}"><span class="sr-only">You must have JavaScript enabled to use this component.</span></div>`

And the JS will look like:

```

import React from 'react';

import ReactDom from 'react-dom';

import dataset from 'dataset';

const myJSComponent = document.getElementById('MyJSComponent');

class MyComponent extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            FirstName: dataset('firstname', myJSComponent)

        };

    }

    render() {

        return <div className="my-component">{this.state.FirstName}</div>;

    }
}

if (myJSComponent) {

    ReactDom.render(< MyComponent />, myJSComponent);

}

```

I'm sure this could be easily applied to a jQuery situation too :)

Cheers,

Stevie

[Uncle Cheese]

There should be an option in webpack somewhere to export your config object to the global namespace.

[Nicolaas Thiemen Francken - Sunny Side Up]

Thank you Stevie and Aaron for your comments. 

​​It sounds like we are on the right track.  I definitely like setting data in the html itself.​

On 30 May 2016 at 10:52, Uncle Cheese <aaronc...@gmail.com> wrote:

There should be an option in webpack somewhere to export your config object to the global namespace.

​It seems to me we are trying to do it the other way ... getting "global" config into specific modules.​ 

[Nicolaas Thiemen Francken]

We would like to make a small website in 4.0 with webpack.  What is the best way to get started - has anything changed since our last post?

Install:

composer create-project --keep-vcs --dev silverstripe/installer ./my/website/folder 4.0.x-dev

Modules to add:

https://github.com/unclecheese/silverstripe-webpack-starter

https://github.com/sunnysideup/silverstripe-webpack_requirements_backend

Documentation:

https://docs.silverstripe.org/en/4/contributing/build_tooling/

It has to be simple enough for a junior front-end developer to make sense of it so that will be a bit of a challenge.

Are there any developments since our last post that will make it easier?

Thank you

Nicolaas