Nuxt generate publicPath wrongly appended to build path - path

I'm importing a nuxt project in my framework.
It will be served at /nuxtapp and is available at APP_ROOT/priv/static/nuxtapp in my file structure.
I can't have assets loaded with the correct path. :(
Here's my config:
{
build: {
publicPath: '/nuxtapp/_nuxt/',
},
generate: {
dir: '../priv/static/nuxtapp',
}
}
The publicPath makes sure assets path in my HTML files is: /nuxtapp/_nuxt/<hash>.js which is what I'd expect.
The generate brings the code to priv/static/nuxtapp which is good too.
The only thing that doesn't work, is that the assets are placed in:
APP_ROOT/priv/static/nuxtapp/nuxtapp/_nuxt/<hash>.js while they should be at: APP_ROOT/priv/static/nuxtapp/_nuxt/<hash>.js so it feels exactly like file is moved at:
${config.generate.dir}/${config.public_path} while publicPath as its name suggests, should only be on the HTML side, as its name suggest.

As far as I'm concerned, I decided to move to universal mode which seems to be much more used hence have much less issues.
Not sure I would encourage Nuxt as a static site generator in spa mode, as document is still quite unclear and behaviors sometimes pretty mysterious.
But in universal mode, it is really great!

Related

sw-precache, cache files with URL Parameters

I have a quick question.
I'm building a PWA with Polymer and Lighthouse reports, that the manifest's start_url is not cached by the ServiceWorker.
Since I want to track the users, which use the 'Add to homescreen' function, my manifest.json contains
"start_url": "index.html?homescreen=1",
I tried putting this exact string into my sw-precache config file, but the script generates a ServiceWorker, that just caches the index.html file.
(I'm aware, that it's a bit redundant to cache index.html & index.html?homescreen=1)
Do you have any idea, how to fix this behaviour?
Thanks!
The ignoreUrlParametersMatching option is sw-precache can help you here.
By default, it's set to [/^utm_/], meaning that if you configured your Web App Manifest like
{
"start_url": "index.html?utm_source=homescreen"
}
then things should work as expected. If you'd like to keep that ?homescreen=1, then, when generating your service worker, you can change explicitly set the ignoreUrlParametersMatching parameter to [/^homescreen/].

Contao Backend Styling / layout missing

Hi contao developer out there,
Anybody knows why the styling of the whole admin backend's missing.
I attach a screenshot, let me know if anyone knows something.
enter image description here
Looks like you have installled your Contao into a sub directory and setup your base url incorrect.
Have a look into system/config/pathconfig.php and verify the path is the same as in your browser (i.e. return ''; for an installation in the root dir and return '/some-dir'; for an installation in an subdir).
You should also check with web-developer tools as to which URLs for the Backend CSS it tries to load. Usually this already points out what in the base url is wrong.
Last thing, you might have set up some "strange" rewrite rules in your .htaccess file which may cause these problems.
Problem solved.
The fact that, the problem comes from the server configuration.
The Php process wasn't have enough permission, so it takes me some time to realise and knowing that I need to change the apache modul version to cgi/fpm mode.
This grants the php to recreate and generate the assets including js/css in asset folder. (at least from my own observation) and it works now.

Firefox Addon SDK Error - Module `project/tests/myjs` is not found at resource

As I progressed with my Firefox Addon development, I wanted to restructure into logical folder structures. And for the need, I thought of keeping some .js files under a directory called "tests", the moment I try to load by adding require('tests/myjs.js'), I am thrown with an error as below:
Message: Module myproject/tests/myjs is not found at resource://jid1-sdfe4541dfsafssdfewf45fa-at-jetpack/myproject/tests/myjs.js
Tried numerous attempts as I did not notice any difference than what was mentioned in official document - it always ended in failure and no much results online. It always worked when placed next to main.js on the same directory, but failed when in the sub directory.
Not sure if it is a bug or designed that way, but undocumented. The solution was to rename the folder. As a brute force way, just renamed the "tests" folder to something else, it worked. Worked with various folder names, but did not work with the folder name "tests".
If anyone knows why, would be better to share. Otherwise, I have my solution anyway.

SproutCore IPAD

I am working on a SproutCore project. I am trying to get the site as is on the IPAD, but the CSS background images, onClick and redirect is not working on the IPAD.
Let me know any solution on this.
When developing on the iPad, I have found the following to be useful in my Buildfile:
mode :debug do
config :all, :combine_javascript => true
end
Most iOS devices tend to have difficulty loading a large number of Javascript files, and this will concatenate them all into one. This may or may not resolve your issues, but many issues manifest if you leave them as separate files.
Also, do you have any errors in the debugger that you could share? It might help us track down the issue.
For broken images/CSS after building, it's often a relative path issue.
You might want to check your CSS / image paths in your compiled CSS & index.html files.
After building the project, look inside your output directory and try the following:
Open index.html file in your browser, and see which CSS/image files are not loading correctly.
Find your index.html file and replace instances of "/static" with "static"
Find stylesheet-packed.css & stylesheet#2x-packed.css and replace instances of "/static" with "../../../static" (or whatever fixes the path in your case)
I have build.sh script to automate this and it works for me. Let me know if you want it.. Good luck!

how to use html img

I have the following folder structure in my zend framework 2 tutorial project in Ubuntu:
/zf2tutorial
/module
/Album
/view
/album
/album
myImage.png
index.phtml
in my index.phtml code I have a line such as this:
<img alt='SMALLIMG' src='myImage.png'/>
this does not work.
If I change the myImage.png to be http://www.someurlhere.com this works fine.
How do I load in myImage.png instead? I tried giving it the direct URL:
/home/myUsername/NetBeansProjects/zf2tutorial/module/Album/view/album/album/myImage.png
I've also tried doing the following:
../myImage.png
but neither of these worked.
Also please note, it has to be a bad path (I must be doing something wrong here) because the broken image icon shows up... indicating there is a linking problem here.. the direct URL is copy pasted from the properties section of the image itself..
It's not a problem of image or path. You are trying to make an impossible thing.
You certainly define in your virtualhost configuration that the documentRoot is your public directory.
That means your web server will give access to resources located from this public directory.
You have to put your resources from this public path (css, images..) or you can define a symbolic link if you allow followingSymlinks.
Hope this helps.
<img alt="" src="img/2 header960.png" align="center" >
The fundamental issue you are confusing is the difference between views vs public content.
View files are essentially HTML templates into which you can inject certain values at runtime. Your directory structure correctly places this stuff within a views directory inside your module. These template files themselves are never exposed to the end-user. They are only used by the application to generate fully-populated HTML chunks that are eventually sent to the browser.
In contrast, static assets - like images, javascripts, external stylesheets, etc - are served directly by the webserver to your visitors. As such they need to be in a directory that the webserver has been told to publicly serve to visitors.
The easy thing to do is to simply move directories containing these static assets out of the module and into the app's public folder.
But this is undesirable in the sense that you might reasonably want the module to be a self-contained entity: it can contain its own routes, its own controllers/actions, and, in particular, its own static assets.
So, how to make the webserver reach down into the module and treat some of the content there as "public"?
The answer is to use an "asset manager", a component that links certain module content into the app's public directory. Typically this means:
Activate the asset manager module
Create a public directory inside your module
Place those static assets there
Inform the asset manager which public module directories into the public app directory.
Take a look at the AssetManager module by Roberto Wesley Overdijk and additional instructions for use.
[As a side note, welcome to the world of web development. ZF2 is a great framework, but it's not the easiest thing for a beginner. It provides a lot of flexibility for doing things in a "good way", but it can certainly come off as convoluted at first. Try not to get discouraged. ;-)]
the reason may be the image extension (.png)
please check your exact extension case, is it written in small or capital case???
update your image link exactly as like the name of image.
eg.
myImage.png or myImage.PNG
try to look for an .htaccess file somewhere in your dir most probably on module folder..that file blocks the access for the image you are trying to link..(my basis here is my application in yii which fails to show the image even if the path is correct)
you may create an images folder in your home dir: /zf2tutorial/images for example and put all the images there calling it: src="/images/myImage.png"..
or
find the htaccess im talking about, change the restrictions(or delete it:|) and you can use this path: src="/module/Album/view/album/album/myImage.png"..
<div id='small_image'>
<a href='/feeds/posts/default' title='smallimg'>
<img alt='SMALLIMG' src='c:/home/myUsername/NetBeansProjects/zf2tutorial/module/Album/view/album/album/myImage.png'/>
</a>
</div>

Resources