A standard HTML web page can be run directly from your computer without requiring a web server. The browser just reads the files directly from your local drive. With the increasing popularity of JavaScript-based web applications, browsers have introduced a variety of security restrictions to prevent malicious sites from reading your local filesystem.

This causes issues with Ext JS because when developing, Ext.Loader will dynamically load and parse the JavaScript files your application depends on from your application directory.

The best way to solve this issue is to simply run your code through a web server as the browser normally expects. Fortunately, to avoid having to configure a full-blown web server on your development machine, Sencha Cmd gives you a simple way of starting up a lightweight server in the current directory. Simply run the following command:

sencha web start

You should get an output along these lines:

And sure enough, visit http://localhost:1841 in your web browser and your application will be ready and waiting:

Note that we can override the port the server uses. In order to start it on port 1999, we will issue the following command:

sencha web -port 1999 start

Sencha Cmd's JavaScript compiler isn't just a way of concatenating and minifying. It understands your code and will process certain parts in order to simplify dependency management.

For example, a wildcard requires option such as Ext.grid.* will be expanded so that all of the files and classes under Ext.grid will be included. Certain configuration options, such as controller or ViewModel, will be converted into their full class reference. This is the Bootstrap process—the way in which dependency information is converted into a list of actual files to be loaded.

This metadata trickery comes with a small price. In certain situations, you need to refresh the Bootstrap data in order for Ext JS to load your application successfully. One way of doing this is to run the following command:

sencha app refresh

This will quickly rebuild the files needed to Bootstrap your app. However, we can go one step further and kill two birds with one stone by running a development web server that refreshes the app when needed. It's as simple as running the following command:

sencha app watch

With this, we have the same web server functionality as web start combined with a process that watches for metadata changes and alterations to Sass files. It will automatically rebuild Bootstrap data and CSS when it detects a change.