I'm currently working on the internalization of a website using Vue.js and the Nuxt frameworks.
I'm moving from a page's url being website.com/my-page to website.com/<lang>/my-page.
To do so, and following the documentation, I've moved all my pages in a _lang folder, giving me the following architecture:
pages/
│
└───_lang
│ │
| |__ my-page.vue
|
...
This works exactly as intended apart from the fact that the <lang> slug is now mandatory, making the access to website.com/my-page return a 404.
I would like for this url to show the page in the default language declared in my application.
The only way I found to achieve this is to create another my-page.vue at the root of pages/ containing the following:
<script>
import Mypage from '~/pages/_lang/my-page'
export default Mypage
</script>
However, this means creating this kind of alias for every pages of my website, giving me:
pages/
│
│─── my-page.vue
│
└───_lang/
│ │
| |__ my-page.vue
|
...
Is there any way to make this automate as this is a very tedious process?
Thank you,
Side-note: I've been investigating extendRoutes without success.
You could use router-extras-module module.
<router>
alias:
- /my-page
</router>
Related
Just started using Nuxt, and I love it so far. I just have one specific issue, I'm using prismic.io as headless CMS for my personal page. I have a few pages and a "blog" page. I'm having an issue when navigating to the blog route, it returns page not found. Now, it's kind of odd because it's working perfectly in my local host, it's just behaving that way when deployed.
Site's being deployed on Netlify.
I already tried switching the route's links and building the project on my local machine and it's working like charm.
Link to site:
https://wonderful-gates-27a024.netlify.com/
This is my file structure for the pages:
Pages/
-- blog/
---- _uid.vue
-- About.vue
-- Blog.vue
-- Contact.vue
-- Works.vue
-- index.vue
Steps to replicate the issue
Navigate to about
Navigate to contact
Navigate to blog (Sometimes the error shows on this step)
Click on an article
Navigate back to the blog (here it should display not found)
Steps to navigate back to blog after the error shows up:
On the url bar, paste wonderful-gates-27a024.netlify.com/blog and hit enter.
I'm getting page not found error
It works sometimes because you are navigating to
https://wonderful-gates-27a024.netlify.com/blog/
Which is different from
https://wonderful-gates-27a024.netlify.com/blog
the page which is /blog
https://wonderful-gates-27a024.netlify.com/blog
doesn't exist while the page
https://wonderful-gates-27a024.netlify.com/blog/
exists. which is /blog/_uid
so if you want it to work make
Pages/
-- blog/
---- _uid.vue
---- index.vue// make this file and the /blog will work
-- About.vue
-- Blog.vue
-- Contact.vue
-- Works.vue
-- index.vue
We just had this error occur and it was caused by renaming About.vue to about.vue on a MacOS machine.
Git doesn't recognize it as a new file, so when you deploy the app on a Linux machine, the problem occurs.
The solution is to rename the file from a Linux machine, so that git recognizes it.
You could also probably accomplish it by renaming the file from Blog.vue to new-blog.vue and then renaming it again to blog.vue.
This is all caused by the fact that files aren't case sensitive on MacOS but they are on linux. You will see it where you have:
<NuxtLink :to="{ name: 'blog' }">
It must be blog.vue to match the route name because the filename leads to the route name. On Linux, the crawler will name the route "Blog" if it is Blog.vue.
You don't want uppercase filenames with nuxt, because they will lead to URLs such as /Blog. I don't recommend having uppercase in your pages directory.
We've now released the updated nuxt-prismic module to solve this dynamic routes issue and enable previews. You see how to migrate your project by following this article:
https://prismic.io/docs/vuejs/getting-started/the-new-prismic-nuxt-module
Also you can see a project enabled with the module already here:
https://user-guides.prismic.io/en/articles/2831943-nuxt-js-sample-multi-page-website-with-navigation
A little background..
As mentioned before in https://forum.vuejs.org/t/how-to-make-webpack-vue-work-on-xampp/33808. And it works when I put my Vue project directly in htdocs like this.
htdocs/
| - css/
| - js/
| etc..
However I'm using it differently, here's my current file structure in the htdocs.
htdocs/
| - project1/
| | - css/
| | - some other stuff for project1
| - project2/
| | - css/
| | - some other stuff for project2
| - vue-project/ (Where I wanted my Vue went to)
| | - css/
| | - stuff..
The error I get when I put dist/ of my vue project directly to htdocs/vue-project is 404, because they directly went back to the root file (root is htdocs/), in which it doesn't find the required file to launch Vue Project!
What I wanted
Anything that can launch the project in htdocs/vue-project/. Would accept any answer configuring either settings in the Vue/Webpack OR from XAMPP itself. If you need additional information please do ask in the comment section.
And if it turns out there are no other way, then I would accept answers involving XAMPP configuration on how to start a server in a different directories. Like start a server in htdocs, and other-file would be great as well.
For Vue CLI before 3.x
Try changing assetsPublicPath under build object in config/index.js. Then append your folder name there. Similiar issue that might help https://forum.vuejs.org/t/vue-js-webpack-deployment-for-xaamp-testing/28970
And if vue-router used then add ROUTER_BASE.
https://router.vuejs.org/en/api/options.html#base
For Vue CLI 3
Create vue.config.js inside your vue-projects
Inside it simply add the following
module.exports = {
publicPath: "/{path-to-your-vue-project}"
}
For more information please refer to this docs https://cli.vuejs.org/config/#publicpath
tldr;
My project is an NPM module that is used by an ExpressJS server. The server needs to specify an endpoint and my module will do the rest. How do I get my module to load the correct html page and grab the correct js/css files from the correct path?
The Problem
I'm running into a problem where I can see the directory structure of the site, using the serveIndex library, and all the files are in their correct directories but for some reason when I try to load any of the files, whether from the serveIndex view or from the actual endpoint where it should load, I get nothing but 404 errors.
Here's an example if someone wanted to use this NPM module from their project.
app.js (their server)
const express = require('express')
const { adminAreaConfig } = require('express-admin-area')
const app = express()
const adminArea = adminAreaConfig(express) // my module being passed the "express" library
app.use('/admin', adminArea) // specify a URL to use my module
app.listen(3000, () => console.log('\n\nServer Online\n\n'))
Here's an image of my projects dir structure after it's been built.
Going off of a console.log(__dirname), which returns <long path string>/express-admin-area/build/src, I then tell my module, using the express reference passed by the actual server in the code above, to look in the views directory with
... import libraries etc ...
const adminAreaConfig = express => {
const adminArea = express.Router()
adminArea.use('/', express.static(__dirname + '/views') // sets my modules views to the "http://localhost:3000/admin" path
adminArea.use('/dirs', serveIndex(__dirname)) // will get into this later
... some other stuff like exports etc ...
This then attempts to load the index.html file in the express-admin-area/build/src/views directory but fails because it can't locate the CSS and JS files inside express-admin-area/build/src/views/static/css or .../js.
First, I know it fails because instead of looking for http://localhost:3000/admin/static/css/styles.css it looks for http://localhost:3000/static/css/styles.css, so that's another problem I need to solve entirely.
Second, looking back at the small code sample above, adminArea.use('/dirs', serveIndex(__dirname)), I'm using the serveIndex library in an attempt to view the directory structure. If I go to http://localhost:3000/admin/dirs I get the correct directories and files in the browser
But now, if I try to view an actual file I'm met with the error Cannot GET /admin/dir/main.js for example if I were to go to http://localhost:3000/admin/dir/main.js, but I can continue going deeper in the directories if I wanted such as the controllers or routes directories from the image.
What I want
I need a way to get these static assets to load. If I point my module to a basic html page with a simple <h1>Hello, World!</h1> then that's what Ill get but trying to load any outside scripts/stylesheets is when I get the 404 errors and nothing loads.
I'll be answering my own question.
The solution is actually pretty simple. The view layer of this module is handled by React, CRA to be specific. CRA will look for some specific environment variables, one of them being PUBLIC_URL. All I had to do was
Create a .env file in the root directory of my CRA
add PUBLIC_URL="/admin"
Afterward, it's just rebuilding the project, yarn build, and reset the server. CRA will then look at http://localhost:3000/admin/static/... instead of http://localhost:3000/static/... for static assets.
I have a problem where Chrome driver is launching twice when I run a feature file.
I'm using Cucumber with Selenium Java using IntelliJ.
The problem came about when I created a new stepdef file for a new area of functionality that I'm working on. So I'm pretty sure this is something to do with how the features are linked to step defs. I'm still learning the ropes here so this is an area I haven't had much experience in.
My Step Defs each come with #Before code to run before every stepdef method and the #Before code contains a
driver.get("https://mywebsite_under_test");
This website URL is different for each of the two StepDef files.
When I launch my test I can see that the two chrome sessions it starts are the ones mentioned in the #Before of each Step Def file. I'm launching from the IDE where I just run the feature.
My project structure is as follows:
├───main
│ ├───java
│ └───resources
└───test
├───java
│ ├───Database
│ ├───Pages
│ └───stepdefs
│ ├───MOPStepDefs
│ └───MOSStepDefs
└───Resources
├───MOP Features
└───MOS Features
I'm out of ideas here. I've messed about with Glue value in the Config but not getting any luck.
With your before tag add the scenario tag so it only runs when you run that scenario i.e. #Before("#MOP") where #MOP is a tag of your feature or scenario. In your instance the syntax should be #Before("#Automated, #MOP")
i'm getting a 404 error when trying to activate my shell. it seems to find shell.js but then indicates that it can't find shell.html because it's looking in the wrong place!
i tried forcing the convention to expressly tell it where to look, but it's still not working. like so: viewLocator.useConvention('viewmodels', 'views', '');
but i still get:
App/viewmodels/shell.html 404 (Not Found)
Obviously it shouldn't be looking in app/viewmodels/, it should look in app/views/
the difference in my project is that i'm not using the '/scripts/' folder for 3rd party stuff, i am using my own folder called '/content/'. i'm also putting almost everything that has to do with durandal in the '/app/' folder.
here's the structure of some key files in my project:
+app (folder)
main.js
> durandal (folder)
app.js
r.js
require.js
text.js
viewEngine.js
viewLocator.js
> plugins (folder)
router.js
> viewmodels (folder)
shell.js
> views (folder)
shell.html
in main.js >
here's where i set the shell to be called:
app.setRoot('viewmodels/shell');
and here's the paths also in main.js:
paths: {
'text': 'durandal/text',
'durandal': 'durandal',
'plugins': 'durandal/plugins',
'transitions': 'durandal/transitions'
}
in shell.js >
well, it doesn't really matter because it's already thrown the 404 by this point.
any ideas?
i see now. i had the wrong path to the defined modules in main.js. not sure why they weren't throwing an error, but anyhow, here's what i changed:
from:
define(['../app/durandal/system', '../app/durandal/app', '../app/durandal/viewLocator'], function (system, app, viewLocator) {
to:
define(['durandal/system', 'durandal/app', 'durandal/viewLocator'], function (system, app, viewLocator) {
seems to work now.