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.
Related
Disclaimer: I am not a frontend guy by trade. I am being asked to deploy an Angular application other engineers have created.
I have gone through the process of deploying an Angular application to GitPages and have also tried the handy Angular CLI GH Pages library. However, they both have the same issue, and I'm not sure if it's the application itself or how I am deploying it.
The base page loads fine, but all other resources (image/font files, links to other pages, etc.) do not load properly. This is because they are not using the proper base URL; our corporate GitHub makes us use https://....com/<org>/<repo> as the URL. All resources outside of the base page are not prepending the /<org>/<repo>/ part to the URL, so they are all returning 404s.
My index.html file in docs/ contains the proper base href="/<org>/<repo>/" and the docs/ folder contains all needed images and font files in its assets/ subdirectory, so I'm not sure what gives. I have also copied index.html to 404.html.
Am I missing something? Or is it possible that this web application was not created correctly for GH Pages?
Thanks in advance :-)
Change the base href to index.html only and all will work from there
base href="index.html"
From there it will take the path properly
similar questions have been asked before, regarding grails 2(.3, .4). I find it strange that i could not find a way to do this, as it seems a standard use-case to me.
I simply want to serve html-pages, including their linked .css and .js (angular and jquery content) when i run grails run-app.
I want to check if my http-calls are handeled correctly on both sides - without needing to deploy a .war and configuring a database.
afaik grails run-app simply starts a jetty/tomcat - both of which can obviously serve .html pages. What do i have to do to make the grails development-tooling deploy my files?
I need to make http-requests,
so using a different Server would violate JS-SOP,
while deploying the .war would greatly slow down the development process
I've so far only found clunky jsonp, proxy, .war deployment solutions, or solutions for grails 2.x
I tried placing the files literally everywhere in the projects' structure (/src/main, /src/main/resources, /src/main/public, the assets folder and its subfolders, created web-app directories in every subdirectory, the Init, domain, conf directories - you name it)
Add the index.html to src/main/resources/public
Then add this to UrlMappings.groovy:
"/"(redirect:"/index.html")
For grails >= 3.0.12
Location of static resources
In order to resolve an issue around how POST requests are treated for
REST applications on non-existent resources, static resources located
in src/main/resources/public are now resolved under the /static/** URI
by default, instead of the base URI /**. If you wish to restore the
previous behaviour add the following configuration:
grails.resources.pattern = '/**'
https://github.com/grails/grails-core/releases/tag/v3.0.12
Contrary to the accepted answer, you don't need a redirect. I have made able to make this work with the following config:
UrlMappings.groovy
"/"(uri: "/index.html")
application.yml
grails:
resources:
pattern: '/**'
Finally, you just need to have your index.html file located under src/main/webapp
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.
I am trying to setup a localhost version of our site and have a problem getting this setup correctly.
Both our live and localhost site have this directory structure:
/na_cms/expressionengine/templates/default_site/c.group
/na_cms/expressionengine/templates/default_site/j.group
/na_cms/expressionengine/templates/default_site/default.group
/na_cms/expressionengine/templates/default_site/inc.group
On our live site, CSS files in our templates are accessed like this:
href=“css/c/modal.css”
src=“j/jquery-ui-1.8.4.custom.min.js”
How do I get rid of the 404 not found errors for the CSS and javascript files on the localhost site?
My config file has
$config[‘rewrite_short_tags’] = TRUE;
I'm obviously using assumptions here until further information gleamed...
You're using templates to hold your JS and CSS, rather than external files (Nothing wrong with that), so they're not technically relative URLs - it's pulled from the database so you won't have any more of a path than template group and template. The browser will not be targeting these template files directly, it will be EE providing them.
In your j.group folder I'm assuming you have a file called "jquery-ui-1.8.4.custom.min.js.js", which relates to a template group called "j" and a template called "jquery-ui-1.8.4.custom.min.js"?
What I'm a bit confused at is "css/c/modal.css", as this is indicating a template group called css, but you've stated your template group is called "c" and the template is "modal.css". Possibly this was a mistake, or you've got a "css" template group and falling into the index template...?
Firstly, check your template folder settings in EE, Design -> Templates -> Template Manager, then "Global Template Preferences". Look for "Basepath to Template File Directory". I'm assuming that you copied the online database to your local, rather than a new fresh install?
If you're using htaccess rewriting, check that is working on your local.
Failing that, try changing the paths to the CSS and JS to use the path variable:
src=“{path='j/jquery-ui-1.8.4.custom.min.js'}”
http://expressionengine.com/user_guide/templates/globals/path.html