CODEWITHSUNDEEP
javascriptdeploymentextjs
Anton Babushkin
Anton Babushkin

Reputation: 406

Deployment in Ext JS applications: Changing URLs in Stores

I'm working out the build process for an application I'm building (using Ext JS + another app's backend) and trying to see if it there is a 'best practice' way of changing local URLs (e.g. data/my-data.json) to my development server's backend and then afterwards to my production server's back-end.

In my Stores I currently have the following code:

Ext.define('APP.store.DataRecords', {
    extend: 'Ext.data.Store',
    model: 'APP.model.DataRecord',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        api: {
            read: 'data/data-records.json',
            update: 'data/update-data-records.json'
        },
        reader: {
            type: 'json',
            root: 'records',
            successProperty: 'success'
        }
    }
});

Upon running the sencha build command, ideally I would like the Store to be transformed into something like this:

Ext.define('APP.store.DataRecords', {
    extend: 'Ext.data.Store',
    model: 'APP.model.DataRecord',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        api: {
            read: 'http://mydevserver/.../data-records.json',
            update: 'http://mydevserver/.../update-data-records.json'
        },
        reader: {
            type: 'json',
            root: 'records',
            successProperty: 'success'
        }
    }
});

I imagine if there isn't any 'direct' approach, I would need to build an additional script which would first remap all my URLs and then call the sencha compiler.

P.S. I understand that normally this all happens transparently by using 'relative' URLs, but I have a few limitations with the back-end I'm interacting with, which prevents this.

Thoughts?

Thanks in advance!

Upvotes: 0

Views: 525

Answers (2)

Anton
Anton

Reputation: 927

In your app.json

    /**
     * override objects for setting build environment specific
     * settings.
     */
    "production": {
      "api_url": "http://example.com"
    },

    "testing": {
      "api_url": "http://localhost:3000"
    },

    "development": {
      "api_url": "http://localhost:3000"
    },

In your store's proxy config

    proxy: {
      type: 'rest',
      url: Ext.manifest.api_url + '/products',
      format: 'json',
      withCredentials: true,
      useDefaultXhrHeader: false,
      reader: {
        type: 'json',
        rootProperty: '',
        totalProperty: ''
      },
      writer: {
        type: 'json'
      }
    }

Upvotes: 0

sha
sha

Reputation: 17860

I would advise against using full URLs when connecting to your store. If you're using Ajax calls and are trying to go to the different domain name such calls will be treated as cross-site calls and browsers will block them.

Upvotes: 1

Related Questions