Discussions

 View Only
Expand all | Collapse all

React.js in Quick Base

  • 1.  React.js in Quick Base

    Posted 01-25-2018 20:35
    Hello All,

    I want to share with you a technique to get your JSX React apps in a Quickbase dbpage.  First, here's the challenge, most people are accustomed to using JSX with React, but JSX is not native JavaScript and must first be transpiled to JavaScript.  This is easily accomplished in a server environment, but how to do this in a dbpage?  The requirement came to me to find a way to make this work without using a server.

    The solution is to do transpiling on page load.  This is slower than pretranspiling, but is ultimately necessary if you don't want to use a server.  The alternative would be to upload your transpiled code, which you should definitely do if performance is a concern.  By the way, performance impact for transpiling on load is negligible for small JSX files.

    Anyways, here goes:

    <head>
        <script src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script>;
        <script src="https://unpkg.com/react@latest/umd/react.development.js"></script>;
        <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>;
    </head>
    <body>
        <script type="text/babel" data-presets="es2017,react,stage-0" data-plugins="transform-decorators-legacy">
            (() => {
                "use strict";
                class Hello extends React.Component {
                    render() {
                        return <div>Hello {this.props.name}</div>;
                    }
                }
                ReactDOM.render(
                    <Hello name='World' />,
                    document.getElementById('container')
                );
            })();
        </script>
        <div id="container">
            <!-- This element's contents will be replaced with your component. -->
        </div>
    </body>


    Note that I am importing babel.  Babel will handle the transpiling for scripts tagged with text/babel.  What is in the script tag above is JSX, not native JavaScript.  Copy and paste this code as-is into a dbpage. It should work without any modification.  Now you can enjoy entering the world of React.

    Happy travels!
    David Maskasky


  • 2.  RE: React.js in Quick Base

    Posted 01-25-2018 20:41
    I used to transpiile coffeescript in this fashion from a code page.

    Then I started using ELM with QuickBsae.

    And I can't wait for webassembly to mature so you can use code written in any language in the browser.

    With all this goodness why is everyone wasting time arguing about which color to hardcode in the product?


  • 3.  RE: React.js in Quick Base

    Posted 01-26-2018 14:03
    If slow page loading is a concern for some, I would look into Parcel.js.  It is a very minimalist web application bundler.  It attempts to avoid all of the configuration involved with other bundlers like Webpack, and makes it very easy to just get your project up and running and bundle the files for production.  If you couple that with the "quickbase-cli" tool which allows you to send your bundled files to your Quick Base application via the command line, you're set up with a nice little developer environment that is very easy to configure and use for projects that involved react, ES6, angular etc. 

    https://parceljs.org/

    https://www.npmjs.com/package/quickbase-cli


  • 4.  RE: React.js in Quick Base

    Posted 01-26-2018 14:07
    Someone just mentioned parceljs in a local meetup so I am going to check that out. Thanks!


  • 5.  RE: React.js in Quick Base

    Posted 06-02-2019 16:39
    I've started doing something similar to this, using the AddReplaceDBPage API to upload my parcel bundle to a quickbase db page.

    I started getting errors saying my max file size has been exceeded. Does anyone know what the limit is? I couldn't find it documented anymore.

    Currently I'm trying to pair down my dependencies to shrink the bundle 

    Also, is there a way with parcelJS to have it fallback to a CDN rather than bundling a 3rd party library? I imagine that would significantly reduce the bundle size, but I haven't found a good way to do this.


  • 6.  RE: React.js in Quick Base

    Posted 08-05-2019 13:38
    If there is a file attachment field involved, those files are maxed out at 100MB


  • 7.  RE: React.js in Quick Base

    Posted 09-11-2019 20:12
    I've found out that the file upload issue I was having was not with the max file size, but actually had to do with the text characters within the Javascript bundle I was trying to upload into quickbase.

    The issue is that depending on what node_modules dependencies you are bundling, you could potentially bundle a dependency which contains characters in it that are not valid for being included in a CDATA tag within the XML payload for the API_AddReplaceDBPage operation (more info on that here ).

    This has really given me a huge headache, as I don't even know how to begin to find out which JS dependency I have that has special characters in its source code.

    I'm hoping that the new JSON API they have been talking about will not have this issue. Does anyone know if there is going to be an opt-in beta for using that API?

    ------------------------------
    Brian Forbis
    ------------------------------



  • 8.  RE: React.js in Quick Base

    Posted 08-07-2019 15:38
    We've since gone a different direction.  We're using create-react-app coupled with an npm package "deployqb".  create-react-app has a build process - you can update the package.json to spit out certain filenames each time when it runs the build.  You can then couple that with deployqb npm package to deploy all files to Quick Base.  So the process is:

    1. npm run build
    2. deployqb prod
    This deploys the built files all to QB and everything is run from the command line.


  • 9.  RE: React.js in Quick Base

    Posted 08-07-2019 15:42
    Ah, yeah I'm familiar with npm... still working on getting it to work properly in my corporate environment (admin account vs normal account)... but I'm using in a web developer course I'm taking.


  • 10.  RE: React.js in Quick Base

    Posted 08-07-2019 16:02
    In this case, does the deployqb prod make a whole new app in QB? or does it make a code page in the selected app, which can then be implemented in the QB environment?


  • 11.  RE: React.js in Quick Base

    Posted 08-07-2019 16:18
    It can take all of your code pages (js, css and html) and deploy those files to Quick Base via the command line.  It can also re-configure the "src" and "link" elements in your code so that everything is wired up once deployed in Quick Base.

    If you already have the app in Quick Base - it will overwrite the app....if it isn't there yet (the code pages), it will add them. 


  • 12.  RE: React.js in Quick Base

    Posted 08-07-2019 16:20
    For clarification... are you saying overwrite the JS App... or the QB App?

    I'm reading through the github for qbdeploy and it's looking like it might be adding the code pages for the JS application to the DB you point it to.


  • 13.  RE: React.js in Quick Base

    Posted 08-07-2019 17:36
    Sure - here is a video overview of it.  Gives a little demo. 

    https://www.youtube.com/watch?v=_S-ie8s_HKE


  • 14.  RE: React.js in Quick Base

    Posted 03-09-2020 15:32
    That is amazing, thank you for the video! Could you share the changes you made in package.json etc. to hook up deployqb to a create-react-app build?

    ------------------------------
    Evan Heckert
    ------------------------------



  • 15.  RE: React.js in Quick Base

    Posted 08-07-2019 18:00
    Thanks a lot, makes perfect sense.


  • 16.  RE: React.js in Quick Base

    Posted 09-18-2019 14:00
    Anyone have any insight to getting either of the CLI tools working. I am getting errors with both deployQB and quickbase-CLI.

    Or alternative solutions for setting up CI with Quickbase's code pages?

    ------------------------------
    Nick Wade
    ------------------------------



  • 17.  RE: React.js in Quick Base

    Posted 06-14-2023 10:08

    @Nick if you are using Windows OS, the path is different than Ryans video example. For Windows the path requires a backslash and that must be commented out so it looks like the example below. 

    "filesConf": [
              {
                   "filename": "main.js",
                   "path": ".\\JAVASCRIPT\\"
              },
              {
                   "filename": "main.css",
                   "path": ".\\CSS\\"
              },
              {
                   "filename": "index.html",
                   "path": ".\\HTML\\",
                   "dependencies": [
                        0,
                        1
                   ]


    ------------------------------
    Jim Harrison
    transparency = knowledge + understanding : The Scrum Dudes
    ------------------------------