I am currently starting to work with hugo SSG. My goal is to have a reliable, yet uncomplicated application to centralize some components in otherwise vanilla html,css,js website projects. I want to utilize hugo to maintain head, header and footer for me.
Now I migrated all of the html and css of my current project to hugo, which worked fine. It's average Landing Pages with header/footer and a couple of sections. However I seem to be unable to include my Javascript files.
I have started with two first scripts to try out the setup, one navBar.js and one headerShadow.js (simple UI tricks).
I have included those two files in {projectName}/themes/{themeName}/layouts/partials into the footer.html with the following tags:
<script defer language="javascript" type="text/javascript" src="{{ "/js/navBar.js" | urlize | relURL }}"></script>
<script defer language="javascript" type="text/javascript" src="{{ "/js/headerShadow.js" | urlize | relURL }}"></script>
First question: Is that even the best practice? I found this on another post on stackoverflow, which I'm unable to reproduce.
Second question: My visual studio code already flags exactly the part /js/navBar.js" in both tags as faulty. What am I doing wrong here?
I tried:
connecting as "usual" <script src="js/headerShadow.js"></script>
I would be very thankful for advice from someone more experienced with hugo!
Thanks alot in advance :)
I would suggest using hugo pipes and assets as a best practices.
In the docs under:
ASSET MANAGEMENT
JavaScript Building
https://gohugo.io/hugo-pipes/js/
It gives the exact syntax and what to do so I won't bother copy pasting it here. This includes Tree Shaking, minify, etc. etc. Things which are "best practices".
I would suggest of the options (like importing from your node_modules or etc.) that you just keep your JS in the assets folder for simplicity and use that option in the above docs.
Specifically: https://gohugo.io/hugo-pipes/js/#import-js-code-from-assets
This would be, in my opinion, for a simple site, best practice.
If you don't want to use Hugo Pipes (it's a bit advanced for what you need), here's a simple way to approach it that worked fine in my project.
<script src="{{ .Site.BaseURL }}js/navBar.js"></script>
In development (hugo server command), .Site.BaseURL will be overridden to http://localhost:1313/. In production (hugo command) it will be the value of baseURL in config.toml, such as https://www.example.com/.
Files in the static directory are built to your site root, so the file would be located at http://localhost:1313/js/navBar.js. That's why I believe the relative path isn't working.
If that doesn't work, there's likely some other issue in your project that needs addressing, or try clearing your browser cache.
Related
I have issues where if I make a change to a CSS or javascript file and then push it to production, the change does not get picked up by client browsers unless they do a ctrl+F5 refresh. I work in a school system with thousands of users so it's not practical for them to know to do this -- or when a change has been made to do it.
I've been reading up and the consensus seems to be to ad a "java.js?v=1.0" to the end of the file. My website uses bundling, and I don't think I'm doing something right. When I try to put this to the end of the files in the .cs config file, when I push it out my site does not recognize the references files at all any more.
For example, he's a list of files that I'm bundling:
bundles.Add(new ScriptBundle("~/bundles/utilitiesJs").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.dynatable.js",
"~/Scripts/js-cookie.js",
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap-multiselect.js",
"~/Scripts/bootstrap-toolkit.min.js",
"~/Scripts/common.js?v=1.0",
"~/Scripts/dropdown.js?v=1.0",
"~/Scripts/waitingFor.js",
"~/Scripts/analytics.js"));
As you can see I added the "V=1.0" onto the end of common.js and dropdown.js. When I go out to the webstie and view the Page Source, these files are simply missing from the includes:
<script src="/DMC/Scripts/jquery-3.1.1.js"></script>
<script src="/DMC/Scripts/jquery.dynatable.js"></script>
<script src="/DMC/Scripts/js-cookie.js"></script>
<script src="/DMC/Scripts/bootstrap.js"></script>
<script src="/DMC/Scripts/bootstrap-multiselect.js"></script>
<script src="/DMC/Scripts/bootstrap-toolkit.min.js"></script>
<script src="/DMC/Scripts/waitingFor.js"></script>
<script src="/DMC/Scripts/analytics.js"></script>
Can somebody please tell me what I'm doing wrong? Do I need to also rename the common and dropdown files or something? I currently have them named simply as common.js and dropdown.js.
Any help you can provide would be greatly appreciated!!
If might not be as efficient but have you tried disabling caching at the page level or possibly setting a smaller cache window?
Also, if the browsers and server support it, your controlled environment makes HTTP/2 a real possibility. Things like bundling become a non-problem.
I'm working on a browser library (based on vanilla JS) and I need to load multiple JS files.
Arbo
/
index.html
lib/
thelib.js
thelib.css
includes/
thelib-part1.js
thelib-part2.js
thelib-part3.js
...
Making some research I found some solution :
Multiple includes
I can easy resolve the issue by doing:
<link rel="stylesheet" type="text/css" href="lib/thelib.css">
<script type="text/javascript" src="./lib/includes/thelib-part1.js"></script>
<script type="text/javascript" src="./lib/includes/thelib-part2.js"></script>
<script type="text/javascript" src="./lib/includes/thelib-part3.js"></script>
<!-- ... -->
<script type="text/javascript" src="./lib/thelib.js"></script>
But it's annoying for the user..
NodeJs tools
I ear about some tools, like Browserify or RequireJs but can I use it without a server side rendering tools ?
Async loading
I also can load manually from lib/the.js the other files, but I'm scared about problems who could append on different server configuration (ex, relative/absolute path ?, read file authorization?)
And I worry about loading times (it will be longer to load each files one after the other right?)
I probably miss a solution, or not understanding well a listed solution ?
To answer this question, I'm using now WebPack who can merge JS + others files into a js bundle and allow you to dev only a browser file (no running web server required)
I am working on a project based on rest api (FOS Rest in Symfony) and React Js.
I have followed following tutorial Code Review Video .
It's amazing and gave me very fine concept for working with React Js with rest api . I also read Limenius/ReactBundle and some other bundles which are manly based on webpack config .
While using webpack config there is two server for running the whole project. first is symfony server for Rest Api and other is webpack server(node js) for React Js.
Is there any way so that the project(with both symfony + reactjs) can run on same server .
If it is please kindly give me idea .
Thanks in Advance .
react.js is only a javascript library.
Just link in the library files with something like: (Im using twig to template in this example)
<script src="{{ asset('bundles/app/external/react.js') }}"></script>
<script src="{{ asset('bundles/app/external/react-dom.js') }}"></script>
<script src="{{ asset('bundles/app/external/browser.min.js') }}"></script>
as you would do with any other file.
There are plenty of resources that give full instructions on which libraries you need in order to get React working, but these are the 3 I use.
A trouble I've personally found with lots of the front-end resource tutorials is they get all hung up with node, bower or any number of other 'package managers'. The truth is, you dont need any of them.
Symfony is just a set of PHP libraries, React is just a javascript library. Theres no magic that needs anything else.
Im using Cordova with Angular and Ionic to develope platform independent mobile applications. Today i learned that it is quite smart for large projects to set up a projects folder like this:
root
index.html
modules
app.js
module_1
module_1.js
module_1.html
module_2
module_2.js
module_2.html
module_2_sub
module_2_sub.js
module_2_sub.html
...
And you define your App.js like this:
angular.module('App', ['App.Module_1', 'App.Module2'])
But that leads to a very huge list of script includes in the index.html if you have a large project:
<script src="modules/app.js"></script>
<script src="modules/module_1/module_1.js"></script>
<script src="modules/module_2/module_2.js"></script>
<script src="modules/module_2/module_2_sub/module_2_sub.js"></script>
....
Is there a smarter way to organize this script includes? Maybe something like just including the app.js and in the app.js include all other needed scripts.
Ofcourse one just could say 'why do you even care about that?' but i kinda have the feeling that it is not very 'nice looking' to have so many includes in the index.html.
do you use grunt or gulp? cause i could recommend you this plugin https://www.npmjs.com/package/grunt-include-source
that include the source automatically in your main html.
And then it could be easier to include the .min if you decide to minify your sources
You could take a look at RequireJS. It sometimes can be a pain to setup for the first time, but once it's up it can help you with your issue.
Take a look at an Angular with RequireJS seed or if you prefer to use Yeoman.
I might also suggest browserify: http://browserify.org. This let's you use the server side node conventions in the browser. And has the additional advantage of letting you share the same code in the browser as on the server. To my mind, it's the most advanced way of handling your code dependencies in a consistent manner.
I have ASP.NET (4.0) web site which in turn has some JavaScript on it. As time goes I include more and more JS files into my aspx and ascx files. Usually I just add
<script type="text/javascript" src="/js/script1.js"></script>
That works fine for small add-ons, but in some cases script1 references to script2 and I need to add one more reference IN EACH PLACE where script1 is used.
Is that the proper way to include JS files? Or I would better load script2.js from script1.js (How do I include a JavaScript file in another JavaScript file?) that will guarantee it will be always included?
Could you please recommend references on the "best practice" with regards to this topic. I've googled for some, but found way too many links and really sank...
Thank you for your help!
The best way I can think of is to base your forms on a MasterPage and then reference all of your js file in the head section of your MasterPage.