Anyone using angular or react or vue within Matrix?

Squiz Matrix Support
1

Matrix Version:5.4.3.0

Hi,

I am wondering if those javascript framework or library can be used within Matrix.

I tried react but it was hard to import module without server configuration. So I gave up react.

There is no specific reason for using those, but I hope I can use those instead of using plain javascrpit or jquery.

Thanks

1 Like
2

I’m not sure what you mean by server configuration - we’ve had projects that used React and Angular which worked just fine without needing anything special at the server level.

Are you trying to follow the guides on reactjs.org? Those are aimed at people writing their entire webapp in React, not people using a CMS.

To use React with a CMS you’d do something more like this: https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f

1 Like
3

Are we able to use modules like axios?

4

I don’t see why not, if you use the “Using CDN” method from https://github.com/axios/axios.

As with the React example I linked above, though, that really doesn’t have anything to do with Matrix - you just call the JS library the same way you would from any Web page.

5

Is the Angular project you mentioned above using Angular 2+ or AngularJS? If it is Angular 2 or Angular 4, how did you make the Typescript compiled in Matrix?

6

It was AngularJS. ⁣

7

Then how could I use other module which does not provide CDN?

For example, https://www.npmjs.com/package/react-js-pagination?

Thanks.

8

If you look at Axios’s CDN instructions, the CDN they’re using (https://unpkg.com) also mirrors all of npm.

So in the case of react-js-pagination, unpkg mirrors the latest version at: https://unpkg.com/react-js-pagination@3.0.2/dist/Pagination.js

(Note that this isn’t a specific endorsement of unpkg, just noting that there are options for this. There’s also https://www.jsdelivr.com/ which does the same thing, I believe.)

9

I’ve added below code in header

<script src="https://unpkg.com/react-js-pagination@3.0.2/dist/Pagination.js"></script>

It shows this error on chrome.
Pagination.js:1 Uncaught ReferenceError: exports is not defined

Did I miss anything on this?

10

Hmm, seems like that module depends on CommonJS then. I gather http://browserify.org/ is one possible option in that case.

We’re really getting outside the scope of a Matrix discussion here, though.

11

We’ve made widgets in Vue. An asset listing will generate the JS data required for the widget. Once you’ve developed the widget in your CLI, run build and upload the build js file to the matrix.

12

We’ve done this too. We also use https://ssr.vuejs.org/guide/non-node.html to render vue components in render function format. We have a components file that exposes available components and call it with:

renderVueComponentToString(new Vue({
  components: {
    topNav: ExposedVueComponents.vNavComponent
  },
  render: function (createElement) {
    return createElement('top-nav', {
        props: {
          // PROPS GO HERE
        }
      }
    )
  }
}), function(err, res) {
  if (err) {
    print(err)
  } else {
    print(res)
  }
})

We are considering the possibility of encasing the entire body area in a wrapper so that we can call Vue components from the content such as those from BootstrapVue or Vuetify

1 Like