how to run sencha web application without compiling - extjs

Hello I am new to Sencha. I have created a test application using sencha cmd. When I have to run it i have to compile it. Is there any way so that I can run the application without compiling and without starting web server.

You can access your uncompiled application, but you always have to use a web server to access your application, because there are problems with AJAX without a web server.
What I did to get this working:
I installed a local web server as a service (in my case it's IIS, but Apache or any other should work as well)
My local web server root directory points to my git repo directory.
In that git repo, I have the myapp-dev directory containing the uncompiled ExtJS application, the myapp directory, and the bin directory containing my backend API.
The app.json file in myapp-dev tells Cmd to compile into the myapp directory:
"output": {
"base": "../myapp",
"appCache": {
"enable": false
}
},
That way, the relative paths to the server API are the same for both the uncompiled and the compiled version, e.g. ../api/GetSettings points to the same path for both versions.
I can now open localhost/myapp-dev/index.html in the browser and get the uncompiled version, or I can open localhost/myapp/index.html in the browser and get the compiled version.

You can just place your app files in a directory inside a server root, then open the index.html directly.
While it is desirable to compile it for production (to get a better performance), it is certainly not necessary if you just want to have your app in "development" mode all the time.

Related

App Service web app showing file structure instead of actual web apge

Today i've deployed my client react app to Azure App Service. The problem is, that instead of displaying site im interested in, it returns structure of wwwroot. Even if I change directory to /src/App.js it return code of the App. What is the problem?
When you run a node application on Windows Azure Web Apps, IIS is used as the webserver together with iisnode and most likely some configuration is wrong so IIS doesn't know what to start. I'd suggest to let Azure handle the creation of the web.config and you don't touch it unless you know what you're doing:
Create a file .deployment with the following content
[config]
SCM_DO_BUILD_DURING_DEPLOYMENT = true
Put the .deployment file as well as the content of your React app (don't include web.config, you also don't have to include the node_modules folder, Azure will handle this as SCM_DO_BUILD_DURING_DEPLOYMENT is set to true) into an upload.zip file.
Delete the content of /wwwroot in Azure
Run az webapp deployment source config-zip -g <ResourceGroupName> -n <AppServiceName> --src upload.zip
A new web.config should get created which should contain a handler for server.js which will be the file to be served by Node.js.
This is solved. Thanks to #azium
The only thing i needed to do is run
npm run build
in local before deployment

How to build react application (with multiple environments) that runs on Apache

Typically deployment process: You build once
In Java or any other programming language, you build your application once and then deploy to various environments. There is like .env or .properties file which has environment configurations that are loaded when application starts.
How does react work
In react, from my understand there is package.json. So, it uses it to do build. OUr package.json has following content:
"price": "http://11.222.111.122/myApi/pricing",
"teacher" : "http://11.222.111.122/myApi/teacher",
"mainbanner" : "https://11.222.111.122/myApi/mainbanner",
We running build the application and run on Apache server (not on node.js)
Question:
a. How can we have environment file so that we can specify to use above urls at time of starting application.
Obviously, we have different urls for different environment.
Navigate into your React project folder using Terminal or CMD and build your React project using command:
npm run build
Then a build folder will be created inside your React project which will contain the final production files. Just upload those files into www or public folder of your Apache server.
If you want use it as subdomain, upload it to your subdomain folder.
Remember that React built version works like other Javascript web applications at the end.

gcloud, python 3, app.yaml in local environement doesn't

For GAE, in python 3.7, using flask, gcloud on windows 10.
Trying to put in place a service-worker, I spend 2 days not being able to load the service-worker.js file.
On localhost if the file is in the root folder, the file in inaccessible, but if I move the file to the static folder, first I have an error because the index.html is on the root but not the service worker file, and second the mine type of the sevrice worker file is text/html.
I figure I need to change the app.yaml file to specify the mine type but it doesn't seem to have any effect. After erasing everything in the app.yaml, I realize that it is not affecting the localhost. I deployed the project and it works on the gae sever.
I would like to be able to test the service-worker locally.
I am missing something?
Loading successfully on GAE:
But 404 on localhost:
You can notice the same problem with the manifest file situated in the root folder.
Thanks.
As the install process stipulate, dev_appserver doesn't work on windows with python 3.
The solution was to install a linux subsystem for windows : https://learn.microsoft.com/en-us/windows/wsl/install-win10
I use the Ubuntu app from the windows store, and follow the installation for installing the gcloud component on linux inside the ubuntu terminal:
https://https://learn.microsoft.com/en-us/windows/wsl/install-win10cloud.google.com/sdk/docs/#deb
Inside the Ubuntu terminal it is possible to access the windows file : the C drive would be /mnt/c.
Getting back to my work folder, it is possible to start the web-app using the dev_appserver command.
Using a navigator from windows we have access to the web-app as normal using localhost:8080.
The development can still be done using an IDE in windows, running the server in Ubuntu.

Where to install Angular on Apache?

First of all, my question is not about how to install angular. I'm just getting started with this framework and already got a question right at the beginning.
Usually I create new web projects (HTML, PHP...) in the default web folder of the apache webserver (/var/www/). I did this with angular too under /var/www/firstAngularProject, but it seems the application itself is only accessible on its default port on the webserver root. In my case this is localhost:4200
When I try to open the path in my browser localhost/firstAngularProject I see the index structure and I think this could become a security issue.
So my question is where should I install the angular project or what is the usual way to install it?
When you run Angular using the cli command ng start (which I assume, based on you describing using localhost:4200) you're running the application using webpack-dev-server. This is undesirable since it's only meant for use during development, not for production.
In production Angular works just like any other frontend framework. You build the application with ng build --prod which produces a number of build artifact (in the /dist folder). These artifact are simply static files you make available through some webserver, in your case Apache, by copying the content of the /dist folder to /var/www (or whichever is your default web folder) and that's about it.

How to run "sencha app watch" without a webserver

I am already serving my ExtJS 5.1 development application on a local (nginx) web server, and I don't need the development webserver from Sencha Cmd when running sencha app watch.
Is there any flag or other command equivalent but without running this extra web server?
Alternativelly, what would be an equivalent command for building the development app (not making the entire build proccess of a production app) but without the "watch" characteristics? ie. issued automatically by the IDE every time I save a .js file.
You can switch off the web server.
Go to the sencha.cfg file located at <App name>\app\.sencha\app and put at the bottom of the file:
skip.web.start=true or skip.web.start=1
I am using Sencha Cmd 6.7.0.63
Create a local.properties file in the app directory and add there:
skip.web.start=true
Vales that can be set in the local.properties file are to be looked up in the sencha installation dir:
Sencha\Cmd\6.7.0.63\ant\build\app\build.properties
Sencha\Cmd\6.7.0.63\ant\build\app\*.properties

Resources