Not getting query string if trailing slash is not present when deployed - vue.js

I've to read the query parameters from an URL in my Gridsome app
. I have 2 cases of URL, in one of which my query key is coming empty object {} when accessing using this.$route.query in my app.
case 1: https://app.com/forms/ads/?param1=one&param2=two - There is a / slash just before query params starts.
case 2: https://app.com/forms/ads?param1=one&param2=two - No / slash just before query params.
When I'm access this.$route.query on my localhost both of these cases giving me the value of param1 and param2.
My problem is when I'm pushing it to production, case 2 is returning an empty object {}.
storeUtmData() {
const utmSource = this.$route.query.utm_source;
const utmMedium = this.$route.query.utm_medium;
console.log(this.$route.query); // return {}
...
},

case1 is requesting in an "index.html" in the folder "https://app.com/forms/ads/" while for case2 no resource will exist on static served webpage when you have build your project with gridsome for production (if you don't have any really special infrastructure).
As the resource doesn't exist my guess is that vue-router which you access with "this.$route" contains only an empty object with this case2.
Why does it work locally ?
I can imagine locally in the dev environment express treats the resource "ads" as a route while on live there is only a folder containing and index.html which is served by a webserver.
The difference between a route and a folder which is served statically by a webserver is that a route from an nodejs express application is actually triggering directly application logic to be executed, while the webserver is mainly transferring the static files in the folder. By convention a folder is accessed with a slash at the end in a URL.
For further information please read the following sections:
https://en.wikipedia.org/wiki/Clean_URL#Structure
https://en.wikipedia.org/wiki/Clean_URL#Implementation
I hope that answers your question.
Why do you need case2 to work in production ?
It should be under your control how to link to certain URL at least within your application.
Cheers,
ewatch

Related

Nuxt JS - reading conf/env file in static site generation

My project with Nuxt JS is set with target:static and ssr: false.
This app need to connect to a local endpoint to retrieve some informations.
I have multiple endpoints and I need multiple instances of the app, every app must read only his endpoint.
The question is: how change the endpoint address for every app without rebuild everyone?
I tried with env file or a json file in the static folder (in order to have access to this file in the dist folder after the build process).
But if I modify the content of the env/json file in the dist folder and then reload the webpage (or also restart the web server that serve the dist folder), the app continue to use the original endpoint provided at the build time.
There is a way or I have to switch to server side rendering mode (which I would rather not use)?
Thank you!
When you use SSG, it will bundle your app at build time. Last time I checked, there was no hack regarding that. (I don't have the Github issue under my hand but it's a popular one)
And at the same time, I don't really see how it would be done since you want to mix something static and dynamic at the same time.
SSR is the only way here.
Otherwise, you may have some other logic to generate dynamic markup when updating your endpoints (not related to Nuxt) by fetching a remote endpoint I guess.
With the module nuxt content it's possible to create a folder "/content" in project directory and read json files from that directory.
After, when creating the dist with nuxt generate command, the "content" folder it's included in "_nuxt" folder of the dist and if you modify the content of the json file and refresh the webpage that read it, will take the new values.

How to set vue 3 with router from subfolder

I installed fresh vue 3 app with cli, containing also vue router.
On my web I have put builded files into www/dist sub folder. Then in my php index file I linked all js/css files to /dist folder manually.
I have an image in component
<img class="discord-icon" src="#/assets/discord.png">
When I set publicHtml = '/dist' , everything works even image is shown, but for some reason my homepage gets redirected from original "www.page.com" to "www.page.com/dist"
I would like to have default "www.page.com" at homepage but also with working image, how can I achieve that ?
Edit :
My router config (default from Manual cli install with router)
const routes = [
{
path: "/",
name: "Home",
component: Home
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
UPDATE :
On vue discord I got adviced to create .htaccess for this, sadly I am not skilled enough to create one, or even know to which folder store it. Also I had another one already in there since I am using php framework (Nette)
This is how I got it working for now :
"publicPath: '/dist'" and "history:
createWebHistory(process.env.BASE_URL)" where project is in "/dist"
folder, so page goes www.page.com/dist. All work but. I go to
"www.page.com" it redirects to "/dist" but when look in html it does
not generate "/dist/css/chunk-vendors.css" so all imported css is
missing. But when I hit refresh (going directly to www.page.com/dist)
chunk-vendors.css is loaded. By default vendors.css is not in
generated index.html so I guess its done by js. So i got evil thought
of just paste that vendors.css link manually to my production
index.html aand it works, althought when going to /dist url directly I
end up with loading this style 2 times lol. Then I got even more evil
thought and changed to 'history: createWebHistory("/")' , rebuilded
for production and now i have nice www.page.com and even all imported
styles are working (with that style link pasted in manually), just
have some feeling I will burn in hell.
Here is a little summary of how a vue-cli project usually gets built and pushed to a server. and what kind of config is important and what 's their purpose. hope it gives you an idea of how to setup your project.
Building with Vue Cli
This is how it works in a regular project to build with vue-cli:
vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/final-sub-folder' : '',
// ...
}
The above config sets a different site URL for dev and prod. The prod /final-sub-folder means that on the final URL in your distant server this sub-folder will be present (E.g. https://example.com/final-sub-folder).
when building with Vue Cli npm run build the output goes into /dist folder (by default) and the build is set for prod by default (so process.env.NODE_ENV = 'production').
Now, if you try to go in that dist folder in your localhost (on Apache for instance), the vue-router using the same publicPath will fail because on your localhost your-proj/dist is a different base URL than /final-sub-folder as set in the config. So it will only work in the final server where the base url can be matched.
Setting up vue-router
Your vue-router should always be set to (this config is for vue-router#next - for Vue 3):
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
So that it follows the base URL you set in a single place, in your vue config.
(notes: the createWebHistory removes the # in the URLs)
Adding a .htaccess
Regarding the .htaccess, it is a common practice to set up redirections in it so that on your final server, accessing https://example.com/final-sub-folder/a-sub-page directly will be redirected to your index.html that can load the vue-router which will handle the route matching of what you entered in the URL.
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
Without this .htaccess, the Vue router cannot be reached from a sub-folder since it does not exist on the server (it's a virtual route using rewriting engine), it would result in a not found URL.
Here is a simple example of .htaccess:
Options +FollowSymlinks
Options -Indexes
RewriteEngine On
RewriteRule \.(js|css|map|jpe?g|svg|gif|png|eot|ttf|woff2?)(\?.*)?$ - [NC,QSA,L]
RewriteRule .* index.html [NC,QSA,L]
What is important in that is the last line redirecting anything to index.html (which is generated from your vue-cli build).
The previous line allows any asset file to not be redirected (no asset file should be handled by vue-router).
Hope it helps you understand! ;)

is it possible to set multiple base url in vue.config.js?

My vue.config.js code is as below
module.exports = {
baseUrl: process.env.NODE_ENV === 'production' ? '/prodserver1/' : ''
}
and it's working perfectly fine by hitting URL: abc.com/prodserver1/index.html (hostname + pathname)
But I have multiple production servers where I wanted to deploy the same application, let's say, I have one more production server named 'prodserver2'
How to pass multiple production server strings in base URL such that I can run app either on abc.com/prodserver1/index.html or abc.com/prodserver2/index.html?
Maintaining multiple applications for each server is not feasible as every minor change needs to updated in each time to each app.
The simple answer is no. You can't supply a path to a file or resource which references multiple possible locations. However using a relative path instead should work.
From the vue documentation baseUrl it first of all suggests to use publicpath instead. In the publicPath description :
The value can also be set to an empty string ('') or a relative path
(./) so that all assets are linked using relative paths. This allows
the built bundle to be deployed under any public path, or used in a
file system based environment like a Cordova hybrid app.
I suggest you use the option of a relative path, so you can then serve your app from any path.

smarty migration website doesn't work. Error 500

I've got to transfer a website from an hoster to another (MelbourneIT).
So I've done as usual with my favorite FileZilla, just copy the html website (without DB) to the other url.
So this one work for the first page ( http://www.lmhceramics.com/) because it's an html one but all my other pages doesn't work!
I've check the folders of my website and I found that this one worked with "Smarty" who is apparently a third party application.
I tried for 5 hours different things as : create an .htaccess to launch index.php instead of index.html, change the configuration on my site_globals.php but it didn't work. It looks like only the first page : index.html is loading.
I can give the access to the ftp if anyone could help it will be sweet as it's one website of my company!
Thanks guys.
Cheers
Initially I tested whether PHP was working, then when I was sure I looked at the error log. The overriding issue was a required library not being found because of a broken path, and PHP's display_errors setting was disabled so it resulted in a white screen.
The site main pages now function.
In site_globals.php, there were two paths that begun with a forward slash. This results in the code looking in the root directory of the server for a particular folder of files (the Smarty library, and the Smarty templates), which likely worked on the old server but not on the new shared hosting environment. New code italicised:
define( "SMARTYPATH", _$_SERVER['DOCUMENT_ROOT'] ._ "/deldridge_smarty/" );
define( "TEMPLATEPATH", _$_SERVER['DOCUMENT_ROOT'] ._ '/smarty/' );
Once that was fixed the code library and templates could be loaded and the rest of the configuration file continued to load. It then dies on:
$db_interface = new DBInterface;
$db_interface->connect( '172.20.254.1' , 'ampnet', 'cable05' );
This is an attempt to connect to a database. I haven't investigated what the database was for yet (that'd require looking through the PHP files in depth) but I'm assuming it was the login system or some such. Almost all of the pages in the site function with those two lines commented out, which I've done for now so that the majority of the content is available again. There's another reference to database connection details further down but they were already commented out.
One other area of particular interest is this:
// different dir structure on secure domain, make ammends
// ensure trailing slash if directory present
define( "SECURE_DIR", 'buildersbollards/' );
if ( $_SERVER['DOCUMENT_ROOT'] == '/home/deldridge/secure.4mation.com.au' )
{
$site_path = '/' . SECURE_DIR;
}
Hop that helps!
It's difficult to know with so little information. Enable error reporting in php or just look at the php error log in your server. One probable cause for the error 500 may be that some key folders don't have CHMOD permission to write; In smarty, for example, templates_c must be writable

Issues with intern-runner and proxyUrl that contains subfolders

I need to setup intern to test ajax calls from a different server. I set everything up sort of following the official wiki in this address
https://github.com/theintern/intern/wiki/Using-Intern-to-unit-test-Ajax-calls
My config file has proxyUrl set to http://localhost:8080/sub
and http://localhost:8080/sub is setup as a reverse proxy to inter-runner in http://localhost:9000
When I run ./node_modules/.bin/intern-runner -config=tests/config from the tests root folder, the browser opens up and is able to request several files, until it tries to request the config file. That's when it receives a 404, because it requests the wrong address - http://localhost:8080/tests/config.js - without the sub folder.
I'm wondering if I'm missing something inside the config file, or if intern is not able to use proxies with subfolders. I tried to set the baseUrl parameter, but it had no effect.
Any ideas?
Update:
It seems that sometimes intern-runner uses the path provided in the config param, and sometimes it uses the one in the proxyUrl parameter inside the config file. As a workaround, what I did was to place the config file and the tests on 2 folders (actually I made a symbolic link). The first on tests/ and the second on sub/tests/ and ran it using ./node_modules/.bin/intern-runner -config=sub/tests/config.
It works, but it's kind of stupid and I really wished there was a better way to do it.
This is indeed a limitation/bug of intern. It assumes that the proxy sits at the root of the absolute domain name, i.e. that it has a pathname of /.
An issue has been created on intern's github repository here and the corresponding pull request that fixes the problem is here. Hopefully this gets merged into the upcoming 2.1 release of intern.