I tried putting the JS file in public_html, where I also put my CSS, but than it only shows the JS code.
I also cannot find any tutorial as to where do put any files and wanted to ask before I do something that will harm my site.
Should I make a new file and change the url in my HTML to the new folder?
Anurag Srivastava said:
It is good practice to put css and js in respective folders, the
index.html will be directly in the public_html folder. But I did not
get this statement of yours - "I tried putting it in public_html,
where I also put my CSS, but than it only shows the JS code."
So I will put every css and js file in separate folders inside public_html, only index.html goes straight inside public_html
Related
I have 3 files, style.css, logic.js and container.html, while developing I need this files to exist separate, but when I am done, I'm searching for a tool that merges referenced css and js files into the HTML file:
<script src="./script/main.js"></script>
will turn into:
<script> ...code... </script>
and the same with CSS.
Is this possible? I first though this would be able with webpack, but the idea from webpack is not directly copying the content from the referenced files into the HTML file. Don't know if relevant, but I save my project on git and would like to run this build on bamboo, result of building my whole project should be one html file where all the code is inside, not being referenced, I could not find something that would do that?
Well a quick Google search gives me:
html-inline
web-combiner
I have included a folder where I keep files I don't want people easily looking at, like passwords in php connection files. This folder is called 'inc' and is at the same level as the 'public_html' folder. I have put php files with database connection details in the 'inc' folder and accessed this using '../inc/' and the filename and it works perfectly - i.e.:
require_once('../inc/connection.php');
I would also like to put javascript files in the 'inc' directory and access them via the src path in HTML. I have tried the same approach as with the php file - that is using '../inc/' and the file name to access the files and for some reason it is not working:
<script src="../inc/moment.js"></script>
I have read similar queries to this on Stack Overflow and followed the right approach (locally and on server) but for whatever reason it is not accessing the js file. It does work however if I relocate the 'inc' folder to within the 'public_html' folder (for js files only) but this defeats the purpose of what I am trying to achieve - and in my mind should not work.
Does php treat the access of directories different to HTML's src hence different behaviour using '../'. I don't think it should and yet I can't get it to work.
Any help greatly appreciated!
A script tag with a source attribute is html that tells the browser to go get a file. Relative paths can be used, but your js files will need to be accessible to the public; they simply can't be hidden outside of the public root.
PHP is a scripting language running on your server. When it sees ../ in the proper contexts, such as the require_once directive you mention, it translates that into the proper path to the directory you are looking for, so it can look outside of the public directory.
Don't put sensitive items in the js, put them in protected files on the server. If you need the info at runtime, make an ajax call to access and use the data to provide the client with only the information it needs.
I have an issue with relative paths whereby when the web app is running off subdirectory of the domain, the paths are not correct. e.g. http://www.example.com/webapp/
If I use #Url.Content("~/path/to/action") on the page it is fine. I can even embed the #Url.Content("") inside the javascript script. I want to clean up the page I wanted to put the javascript inside a js file and reference that. Now that the #Url.Content is being called inside the javascript file, it doesn't seem to work (probably for obvious reasons). How can I get around this issue?
I had a look at the <base /> but that doesn't seem to work.
Now that you moved everything into a separate js file, the file is being served as static content, and the Razor syntax is not being parsed.
If you need relative paths inside of your js which might change, then you should include a script in each page which sets a path var, and use #Url.Content(...) in this script, e.g.,
<script type="text/javascript">
pathToAction = "#Url.Content(...)";
</script>
Then, declare the pathToAction var in your js file, and use it as needed.
I have a number of .js files that I would like to be stored in the same directories as their views (they're specific to a view - its simply to keep the javascript separate from the view's HTML)
However, adding them to the /Views/ControllerName/ directory wont work because when a request is made to the webserver for the .js file:
<script type="text/javascript" src="/Views/ControllerName/myscript.js"></script>
It would essentially be directed at the 'Views' controller which obviously doesnt exist.
Update
From what I have read, adding the following IgnoreRoute in the global.asax.cs RegisterRoutes method should permit access to any requested .js file:
routes.IgnoreRoute("{resource}.js/{*pathInfo}");
However, I cant seem to get it to work?
SOLVED
After having found and tested a number of posts (most conclusive post here) that I couldnt get to work, the following solves the puzzle:
In the Global.asax, add the following code to the RegisterRoutes method:
routes.IgnoreRoute("{file}.js");
There is a great post here that describes this and additional activity here
You have two options, I think.
Recreate the Views folder structure under scripts and store them in the same relative location in the scripts directory.
Don't keep them in separate files, but use separate ContentPlaceHolders in the MasterPage for a script section (typically at the bottom of the body).
You could also store them in any of the non-"special" folders, but I think scripts is the right place if you are keeping them separate.
I normally keep common scripts (used by more than one page) in the scripts folder, without a corresponding views hierarchy, and page-specific scripts in the view file, but in a separate ContentPlaceHolder. To me the important thing is not to keep the JS in a separate file, but separate from the content. Using a different ContentPlaceHolder accomplishes this.
Contemplate that last sentence of yours - might that be why a specific directory (/Scripts/) has been set aside for these? ;)
I'd like to split my views in Grails into 2 files a .gsp file and a .js file so that I get a cleaner Javascript separation from my views. So here's an example:
views/index.gsp
views/index.js
views/home/index.jsp
views/home/index.js
But when I simply add the index.js script reference like this:
<script src="index.js" type="text/javascript"></script>
all I get is a 404.
Does anyone knows how to deal with this?
A great benefit would be to have the ability to use view data inside the index.js file to produce the desired content.
Matthias.
Actually, it should be perfectly possible to serve a JS file (or any other file type) as a GSP from your grails-app/views/ directory. The only thing you have to do, is define a suitable URL mapping for those GSPs, e.g.:
"/javascript/home/index"(view:'/home/index.js')
With this URL mapping, you can put your JS code into grails-app/views/home/index.js.gsp (note the trailing .gsp) and you can use any grails tags in your JS source. To ensure that your JS is delivered with the correct content type, you may want to place
<%# page contentType="text/javascript"%>
at the beginning of your GSP.
Unfortunately, the createLink tag doesn't support link rewriting to views, but it should be easy to write your own tag to create those links.
Anyways, keep in mind that this won't have a very positive impact on your app's performance. It's usually better to have static JS files (and also serve them as static resources) while passing dynamic stuff as parameters to JS functions for example. This will also keep you from some headaches wrt. caching etc.
The idea is good, but Grails has this directory structure for a reason. The view folder is intended for a certain artifact type (views)..
You could clone your view folder structure under web-inf, but that gives you more work as I guess the idea behind this is to keep related files close together for convenience reasons.
Even though I'm not to excited about storing Javascript together with the view I loved Robert's idea of hooking into the build process by using build events to copy javascript sources into the right directory! If you decide to go down that road you might as well compress the sources while you're at it. ShrinkSafe is popular library.
I don't think you are allowed to access js inside views/
if you need to do that ... here is the trick
create your js and rename it with myjs.gsp (use "")
iniside _myjs.gsp type you js
... write down you js in here ...
inside you gsp (for example: index.gsp, view.gsp, etc)
type this tag to upload you js
Update 2:
Grails offer the possibility of hooking into the build lifecycle using custom events.
An event handler can be written which synchronises all JavaScript files under grails-app/views with the target folder of web-app/js.
Place the custom code in $PROJECT/scripts/Events.groovy. The PackagingEnd is a good target for the invocation, since it happens right after web.xml is generated.
eventPackagingEnd = { ->
// for each js file under grails-app/views move to web-app/js
}
Update
If you'd like the JavaScript files simply 'meshed' together, you can do that using symlinks, e.g.:
grails-app/views/view1/index.js -> webapp/js/view1/index.js
As far as I know, there is no way of forcing grails to directly serve content which is outside of web-app.
Alternatively, you can inline your JavaScript, but that can have performance implications.
JavaScript files belong under web-app/js.
Then you can reference them using <g:javascript src="index.js" />.