In my java web application sources generated by Sencha CMD are located in resources folder. I am trying to run application in dev mode (without build) using boostrap.js, so I declared Ext.Manifest and included below in jsp file:
<script id="microloader" data-app="52906e0a-6b39-4de6-b1f2-dc27cf37969e" type="text/javascript" src="resources/bootstrap.js"></script>
With standard configuration microloader tries to load files as if extjs application source files were directly in web root path, which is inccorect as the files are not there:
http://localhost:8080/myapp/classic.json
how to "tell" microloader to look for the files in resource folder, so the request would look like this:
http://localhost:8080/myapp/resources/classic.json
I am able to make this work without using boostrap.js, if I include app.js directly and specify appFolder in Ext.Application. But I want to test different profiles (modern, classic).
Related
I developed an application with ReactJS and got chunk files with npm run build. But how can I call these files via sharepoint master page. I just add the main chunk files to master page and loaded it but it never called the component and it doesn't render.
I uploaded the below files to the SiteAssets folder in SharePoint. I just the call main.553276c9.chunk.js via master page.
0.45984e43.chunk.js
0.45984e43.chunk.js.LICENSE.txt
0.45984e43.chunk.js.map
3.e5ccfe13.chunk.js
3.e5ccfe13.chunk.js.LICENSE.txt
3.e5ccfe13.chunk.js.map
4.bdcd656e.chunk.js
4.bdcd656e.chunk.js.map
5.41ddc0b8.chunk.js
5.41ddc0b8.chunk.js.map
6.cc7d4939.chunk.js
6.cc7d4939.chunk.js.map
main.553276c9.chunk.js
main.553276c9.chunk.js.map
runtime-main.85cbbfa2.js
runtime-main.85cbbfa2.js.map
Most build systems that generate files like this should also generate an index.html file that should load and run your app. You should upload that html file, along with all js files, and run your app from that.
If you're using Create React App with react-scripts the index.html should be in build/index.html.
According the documentation runtime-main.85cbbfa2.js is file to include.
runtime-main.[hash].js
This is a small chunk of webpack runtime logic which is used to load and run your application. The contents of this will be embedded in your build/index.html file by default to save an additional network request. You can opt out of this by specifying INLINE_RUNTIME_CHUNK=false as documented in our advanced configuration, which will load this chunk instead of embedding it in your index.html.
Just note that that filename will change when the code changes. The build process will update your HTML file, with that new filename. So you definately want to be in the habit of uploading that.
I moved my bower_components two levels up to get it out of my project, out of the way of source control because it's a build artifact, it's not my source code and it's not part of the build output (my build output concats all the vendor js into vendor.js, one file).
So I can build find and it creates my dist folder fine; I got that working.
But now when I try to serve in order to debug on my local machine, index.html correctly points to all the ../../artifacts/bower_components scripts and it can't find them when it runs in the web server. I guess because they are above the web root.
How can I get the web server to find them?
I moved my bower_components two levels up to get it out of my project, out of the way of source control because it's a build artifact
Moving bower_components one level up so as it is out of your app files is logical. But two levels up so that it is out of source control is not. This case is better handled by adding an exception to the ignore file .(git|svn|...)ignore
Anyway, depending on the server you use, you should be able to configure a route, so that the server serves also whats in the bower_components folder. Here is an example with browsersync:
server: {
baseDir: "app",
routes: {
"/bower_components": "bower_components"
}
}
The server serves what's inside app folder, and also maps the content of the bower_components folder to the route /bower_components.
Links in index.html look therefore like that:
<script src="bower_components/angular/..."></script>
...even though bower_components is at a different level from index.html.
I am using Spring Tool suite
Where my directory Structure is :
MyAPP
->src
->main
->webapp
->WEB-INF
->js
angular.js
->spring
->views
login.jsp
Now in login.jsp I have to access Angular.js but it is not Accessable
I am using
login.jsp
----------
<script src="/MyApp/src/main/webapp/WEB-INF/js/angular.js"></script>
Once compiled, assembled in a war and deployed to your web container (which your IDE is doing it for you), the root of the application is the webapp folder. Since a Java webapp is deployed under a context path, you need to prepend this context path to the URLs you use:
<script src="${pageContext.request.contextPath}/WEB-INF/js/angular.js" />
or, with the JSTL
<script src="<c:url value='/WEB-INF/js/angular.js'/>"></script>
But even that won't work, because everything under WEB-INF is inaccessible from the outside, by design. So you must put your JS files outside of WEB-INF.
This shows a serious lack of understanding of how Java webapps are, what's their structure, etc. You should familiarize with these basic things before going further.
So i have watched the 5 part youtube videos by David Mosher about Angular JS (vids great by the way). In the part 2 (http://www.youtube.com/watch?v=hqAyiqUs93c), it has a practical mysql database usage which I almost wanted.
I'm going to use AngularJS along with Laravel 4, but I had no idea which files I'm going to upload for the web hosting later. I'm trying to run the web app under "/public" folder in my root on localhost (localhost/public/) but the css and js points to the wrong directory (points to the root: '/css/style.css').
Another method I have tried is by copying all the files to the root and moved all files inside "public" to root. Then I navigate to "localhost/public/". All works fine in script paths, except that it doesn't seemed to do any connection to the database (either the laravel or angular failed).
Is there any proper way to do this for practical use (without using php artisan serve or grunt run or lineman run on the server)? Which files I should upload later?
EDIT: the reason is my web hosting doesn't allow me to install nginx or run code remotely using putty, so I need a manual way to do this. Thanks.
First install latest laravel in your localhost. See doc.
Assuming you have completed composer install command.
Then move your all public folder contents to the project root.
Next change the line 21 in index.php from,
require __DIR__.'/../bootstrap/autoload.php';
to
require __DIR__.'/bootstrap/autoload.php';
and line 35 content
$app = require_once __DIR__.'/../bootstrap/start.php';
to
$app = require_once __DIR__.'/bootstrap/start.php';
Now you can access project without public folder.
Place your css, js and other assets folder in root like http://localhost/laravel/css
Note that the laravel blade and angular also using {{ syntax for compilation.So you need to change the laravel blade syntax to {= and =}.Otherwise you will get conflict.
To do this open vendor/laravel/framework/src/Illuminate/View/Compilers/BladeCompiler.php file and change line 45 to this
protected $contentTags = array('{=', '=}');
and line 52 to this
protected $escapedTags = array('{={', '}=}');
Now you can use {{ for angular and {= for blade.
For linking your assets, use HTMLBuilder functions, see doc here.
Now use these in blade,
{= HTML::style('css/style.css') =} // links localhost/project/css/style.css
{= HTML::script('js/jquery.js') =}
Use migrations and db seeds in localhost and make an exported copy of db for online hosting
After completing project, copy entire project content to online server and change db configuration and import database.
Directory Structure for Online
There will be a public directory for your file hosting, where you put your files in web root.
That may be htdocs or public_html and now it's your project public root.Now the directory structure will be,
-- app
-- bootstrap
-- css
-- images
-- js
-- vendor
Creating a new Ext JS 4.1.1 app based on the file structure section in Sencha's MVC Application Architecture guide I end up with this structure:
/wwwroot
/myapplication
/app
/controller
/view
app.js
/extjs-4.1.1
The app.js file contains:
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
appFolder: '/myapplication/app',
autoCreateViewport: true,
name: 'MyApplication',
controllers: [
...
]
});
All fine. I then include the app.js to be outputted in my server-side MVC application (not to be confused with the client-side Ext JS MVC structure). The language used and structure of the server-side application is of no importance to this question, but the result of the output is. In development, the URL of the application is:
http://servername/someidentifier1/someidentifier2
As in many applications, mod_rewrite is used to give meaning to the identifiers and map the URL to server-side code. These identifiers do not map to "physical" directories. The output of this URL is:
<!DOCTYPE html>
<html>
<head>
<title>MyApplication</title>
<link href="/extjs-4.1.1/resources/css/ext-all-debug.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="/extjs-4.1.1/ext-debug.js"></script>
<script type="text/javascript" src="/myapplication/app.js"></script>
</head>
<body>
</body>
</html>
Ext JS is not at the default recommended location, being /wwwroot/myapplication/extjs-4.1.1, but instead one level up since it is shared between multiple applications. If you look back at the app.js above, you also notice the appFolder setting which needs to be set in order for this to work with the "non existing" URL.
This all works fine in development, but the next step is to generate a "build" of the code with the Sencha SDK Tools (question is based on version 2.0.0 Beta 3 for Windows).
This is where it goes wrong. I take these steps:
Command line I go into the /wwwroot/myapplication directory.
I execute sencha create jsb -a http://servername/someidentifier1/someidentifier2 -p myapplication.jsb3 to generate a jsb3 file.
I execute sencha build -p myapplication.jsb3 -d .
The build fails. In this case because it tries to find the custom code for e.g. controllers in the path c:\...\myapplication\myapplication\app\controller: the current path + the appFolder setting. You would assume running it one level higher would be better, but then it cannot find the (shared) extjs-4.1.1 directory.
I would guess time will make the Ext JS MVC structure and SDK Tools more flexible and deviating slightly from the default structure is not recommended. All acceptable, but on the other hand: integrating Ext JS 4.x (Ext JS in an MVC way) with URL rewriting (mod_rewrite) must be a very common practice too?
Any suggested working set up/structure would be highly appreciated.
Goals should be:
No manual editing of the jsb3 file.
Keeping the extjs-4.1.1 directory at the top level to be shared among applications.
Having no app.html file since it is never used in server-side MVC applications and would otherwise require manual updates.
A nice extra would be to have the content of app.js inside the server-side generated HTML since it would then be able to receive dynamically generated parameters.
Couple things.
First - you don't need to specify absolute path for ExtJs library and for your app in the loader.
...
appFolder: 'app' // should be enough
...
Second - as for differences between build and production - I ended up having two .html files - index.html and index-dev.html. These files don't get changed (once you set them up) so it's not a problem to keep them in sync.
You use index-dev.html for your development needs, debug and also for build process. Basically this file is configured for your local development environment.
index.html just uses combined and minified version of your app.js and configured for production deployment.
Using mod rewrite you can use a slightly modified .htaccess file from Symfony
<IfModule mod_rewrite.c>
RewriteEngine On
#<IfModule mod_vhost_alias.c>
# RewriteBase /
#</IfModule>
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ app.php [QSA,L]
</IfModule>
This file let you
get resource from server if they are real files (css, js, images, etc.)
convert url parts to query parameters if there aren't matches on server filesystem.
This should work on your setup, just change the app.php line to your application entrypoint
for directory setup, yours is fine, just a couple of things:
your SDK tools are outdated, since you can download:
http://www.sencha.com/products/sencha-cmd/download/ (v3.0.0)
following docs at http://docs.sencha.com/ext-js/4-1/#!/guide/command you can get a "build" with the class you need, but in the end or you manually switch between development / production javascript file, or you switch using environments variables in your code.
Actually I think you could use a "fake" index.html in build directory to be modified by building tool then in production code you can mimic the code generated by sencha build.
Creating a index.html file to generate the project file will be a way to go. I also found that sencha architect is very rigid and hard to use. The most annoy thing is that I can't use the external editor to edit the generated code. Everything have to be done in the designer, which is fine if the designer can provide every functionality I need. But it can't.