Exclude files from the Sencha Touch build process

Question

Exclude files from the Sencha Touch build process

Within my Sencha application, there is a Config.js file that holds various service URLs:

Ext.define('MyApp.utils.Config', {
    singleton : true,

    config : {
        authBaseUrl : '...',
        serviceBaseUrl : '...',
        reportsBaseUrl : '...',
        imagesUrl : '...'
    },    

    constructor : function (config) {
        this.initConfig(config);
    }
});

Prior to deployment, I utilize the

sencha app build

command from the Sencha Touch SDK to compress and combine files.

The issue arises after the build process includes config.js in the minified app.js file. It would be beneficial if I could make edits without having to rebuild or redeploy the entire application. Despite efforts, I have not discovered a way to alter this behavior within the build process.

Therefore, post-building the application, it is preferred to retain these three separate javascript files:

sdk/sencha-touch.js (compressed, concatenated, cached locally)
app.js (compressed, concatenated, cached locally)
config.js (untouched, not cached locally)

javascript sencha-touch sencha-touch-2

Answer 1

Answer №1

Separate it from the application so that it is not bundled, and then add a reference to it in app.json. I have found this approach to be effective in similar situations.

In addition, I maintain a config.js file that undergoes frequent modifications during my development process. In my app.json file, it would appear like this:

"js": [
    {
        "path": "sdk/sencha-touch-all.js"
    },
    {
        "path": "config.js"
    },
    {
        "path": "app.js",
        "bundle": true, 
        "update": "full"
    }
],

This ensures that your config.js file gets included in the build.

Next, you will need to insert the script into your app.html file, ensuring that it loads before your main app.js. Mine appears as follows (generated by Sencha Architect):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>llm</title>
    <link rel="stylesheet" href="resources/css/llm.css">
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="sdk/sencha-touch-all.js"></script>
    <script src="config.js"></script>
    <script src="cordova-2.0.0.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

I hope this solution proves helpful for you!

Answer 2

Separate it from the application so that it is not bundled, and then add a reference to it in app.json. I have found this approach to be effective in similar situations.

In addition, I maintain a config.js file that undergoes frequent modifications during my development process. In my app.json file, it would appear like this:

"js": [
    {
        "path": "sdk/sencha-touch-all.js"
    },
    {
        "path": "config.js"
    },
    {
        "path": "app.js",
        "bundle": true, 
        "update": "full"
    }
],

This ensures that your config.js file gets included in the build.

Next, you will need to insert the script into your app.html file, ensuring that it loads before your main app.js. Mine appears as follows (generated by Sencha Architect):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>llm</title>
    <link rel="stylesheet" href="resources/css/llm.css">
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="sdk/sencha-touch-all.js"></script>
    <script src="config.js"></script>
    <script src="cordova-2.0.0.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

I hope this solution proves helpful for you!

Exclude files from the Sencha Touch build process

Answer №1

Similar questions

How to implement hover effect to show child div within parent div using React.js

Utilizing Redux Reselect for Comment Filtering

Tips for accessing and passing the clicked element as "THIS" within an addEventListener

What are some ways to shift all content (whether relative or absolute) downward?

Determining Asynchrony in Node.js Through Programming

Why is the implementation of partials not successful in this Angular 14 application?

How can I resolve the error message "TypeError: Cannot convert undefined or null to object" when using vue.js rendering?

What is the best way to make this eerie javascript script communicate with my webpage or another jquery file?

What is the mechanism behind the clipping function in the three.js frustum?

Ways to individually select and activate several HTML elements with matching classes, and then apply styles to a different div featuring multiple classes using Jquery or JavaScript

"Enhance your website's user experience with a sleek multiple selection

Instructions for transferring information from a JSON column in a MySQL database to an HTML table generated using a PHP foreach loop

Issues with Alignment of Navbar Elements in Bootstrap 3

Please tap to dial: Access to navigation is restricted

The ready/load frame event fails to trigger when a new frame URL is loaded

Incorporating external script into React website's functional component

What is the process for creating a customized object using Serialized format?

"Having trouble with ion-input functionality, but regular input is functioning without

Using the ng-template-outlet within two separate loops

Guide on catching network errors using Axios request interceptor?