I am trying to run my cypress e2e tests in a Github CI on a Vue 2 SPA using CLI. Locally they work fine when running ./node_modules/.bin/vue-cli-service test:e2e. But navigation inside the testing framework with cy.visit(), e.g. to /login fails inside the CI pipeline with a 404 - requested path not found.
As I am aware, docs state:
Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser.
When running the production build manually using npm serve it faces the same struggle. Vue-Routes navigation works as expected, but calling sub-routes fails with a 404. Production with a NginX reverse proxy works as expected.
So:
Why does the dev server work locally when Vue CLI is serving itself?
How to redirect all sub-route requests to index.html for the cypress e2e tests?
Edit: Weird thing is. Running serve ./dist with the silent flag -s fixes the redirection problems completely. Doesn't make sense to me.
Related
I'm trying to develop a Hubspot's Click to Call app to use by my PBX.
I've already studied the Calling Extension SDK guide and made a simple poc that works into my localhost by npm (npm start).
Now I'm trying to move into production test evinroment so, into remote server, I've basic copyed the project files and binded it by Hubspot App registration.
Unfortunatelly, when I run the app on my Hubspot TestAccount, I see (in the browser console) that it requires a "./bin/index_combined.js" file. It isn't into my npm directory and npm compiles it for me only when I run "npm start" command...(local scenario).
So how to use my Click2Call app by remote without npm ? or how to produce an index_combined.js good for remote scenario?
When I run my Vue app, the Vue devtools extension detects Vue.js, but complains:
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
I'm serving the app locally using yarn serve, which runs vue-cli-service serve.
vue: 3.0.0
vue devtools: 6.0.12
#vue/vue-cli: 5.0.1
#vue/vue-cli-service: 4.5.14
node: 16.14.0
yarn: 1.22.4
Chrome: 98.0.4758.102
Vue devtools DOES work if:
Another dev runs the app in Chrome from a clean local repo (same versions of everything above)
I create and run a new Vue app (vue create) in Chrome
Vue devtools DOES NOT work (same error message) if:
I run my app from a new local repo
I clear all browsing data from Chrome
I add vue.config.performance = true to my main.ts file
I add --mode=development to my vue-cli-service build command
I use Edge (Chromium) instead of Chrome
I update vue to 3.0.14
I access the app via http://localhost:8080 or a hosts file alias https://myalias:8080
AFAIK I never did anything to force a production build or disable vue devtools, so I'm stumped why it doesn't just work out of the box. What am I missing?
[UPDATE]
.env files have only VUE_APP_* variables defined.
Vue is installed locally (not using CDN version).
vue.config.devtools is not available in vue3. vue.config.performance appears to be the replacement.
Using the Vue devtools beta (6.0.0.21) does not help.
[UPDATE 2]
I upgraded all matching packages in my project to match the versions in the new Vue app for which the dev tools were working. The dev tools are now working on my app, but I don't know which package upgrade did the trick. Would still be nice if the Vue owners could provide more insight into why this occurs and how exactly to fix it.
For my situation, go to Chrome's More Tools > Extensions > Vue.js devtools > Details, and switch on the Allow access to file URLs option. Finally it works for me again.
Check that you do not have explicitly defined mode NODE_ENV in a local .env file
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
Having that would completely explain the behaviour you're experiencing and also why it works as expected on other machines.
summery
I"ve tried to deploy sample Vue Nuxt SPA to AWS S3.
My Sample SPA is correctly displayed in my local Ubuntu20.04 environment with yarn start.
However SPA on S3 does not work correctly and shows error.
I want to know how to deloy correctly and show the same content as I did in my local environment.
what I've tried
Run yarn start
Confirm SPA does work in my local environment.
Run yarn generate.
Deploy /dist to S3.
Configure S3 access rigihts.
Confirm SPA does not work correctly in S3.
show some codes
here is the github repo I've tried.
https://github.com/jpskgc/vue-nuxt-spa-sample/tree/main
I'm creating my gh-pages using nuxt.js. But after deploy, some of nuxt.js requests are receiving 404 responses and I have no idea how to fix it.
Here is my github.io page. Under npm run dev environment it works but after deploy did not.
I have uploaded my code for a Vuejs site to Gitlab and if I build it using the Vuejs ui I get a valid website and everything works fine. How would I build my website using Gitlabs CI / CD?
Found it: https://about.gitlab.com/2017/09/12/vuejs-app-gitlab/
Thank you, Billal Begueradj!