I would like to deploy my app to a virtual directory. I have been unable to figure out the correct configuration needed to run the app locally with a similar structure. For example, I'd like to run it from:
http://localhost:8080/demos
I have tried every combination of adding "demos" to publicPath and contentBase in my webpack config. The errors just between 404's on static assets and router errors from Aurelia.
It is documented by Aurelia router, you can add base tag to index.html header, <base href="/demos">, and set router root config.options.root = "/demos"; in configureRouter().
In addition, if your bundled js files are indeed served from directory, you need to modified baseDir in 2 places of aurelia.json: platform.baseDir and build.targets[0].baseDir.
Related
I'm using Nuxt 2.15.8 to generate static pages (migrating to Nuxt 3 is also an option for me if it solves the problem).
It works great when deployed in the root folder of the server but I need it to be served in a subdirectory, like:
https://my.domain.com/folder/subfolder
The problem is that the compiled HTML includes nuxt related assets like:
/_nuxt/123456789.js
which translates to:
https://my.domain.com/_nuxt/123456789.js which obviously fails as the file is in a subfolder, not in the root.
I tried using publicPath config and absolute paths but it is not an option for me as I have several environments with different URLs.
I need to generate static HTML files with relative paths in order to make sure my site works as expected in all the environments, agnostically from the server URL.
I was able to achieve it using Vite + Vue 3 but migrating to a new implementation is not an option, I need to achieve it using the current Nuxt implementation.
I tried using nuxt-vite https://vite.nuxtjs.org/ but was not able to achieve relative paths, I still get
/_nuxt/123456789.js
instead of
./_nuxt/123456789.js
../_nuxt/123456789.js
../../_nuxt/123456789.js
, etc
It seems like it's not supported in plain nuxt 2 but if you use nuxt-vite you can set vite.base to '' or './' in nuxt.config to make the paths relative.
Try this out:
export default defineNuxtConfig({
app: {
baseURL: '/mydir',
buildAssetsDir: '/mydir/_nuxt/',
},
Or just edit index.html manually...
I'm publishing my SPA that I'm making with Vue and Buefy to my a gh-pages branch a of private repo, just so I can test if everything will load normally.
Later, I'll upload the finished website to the actual public repo, which is tied to my custom URL (I'm redesigning the website from scratch, using a diff tech).
Since Vue websites needs to be built for distribution, I'm using an NPM package to do this for me: https://github.com/KieferSivitz/vue-gh-pages
"deploy": "node ./node_modules/vue-gh-pages/index.js --branch gh-pages -m \"Deploy to gh-pages.\""
When deploying the website, it loads only partially. The images won't load, and the router will not work (links to other pages won't work).
I'm storing images in the assets folder, and using require('#/assets/logo.png') to load them (at least it works with localhost).
The images are trying to be loaded from https://<username>.github.io/img/logo.d2151712.png.
I read that I would need to set the publicPath to my project name, since currently the website is being served from https://<userName>.github.io/<projectName>/, but with that, the whole website is 404-ing.
With that property, the whole website would try to load from https://<username>.github.io/<projectName>/<projectName>.
I think that somewhere, there's a setting adding <projectName> to router, but not adding elsewhere.
Edit
I tried to force vue-router to get the correct base, without setting the publicPath:
base: "<projectName>/", //process.env.BASE_URL,
But the routes are stil not working, since I'm lazy loading them using import("#/views/Page.vue").
It seems that your issue is, that you want to run your Vue app in a subfolder of a domain (domain.com/subfolder/index.html). This needs to be configured in Vue CLI. Add a new file to the root of your repository, called vue.config.js and add the following content:
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/subfolder/' : '/',
};
This will set the webpack publicPath to /subfolder/ when running the build process in production mode. If you are using Vue CLI < 3.3, you need to use baseUrl instead. You need to make sure, that your path starts with a slash.
See also the documentation of publicPath.
Vue CLI has also a special section for the deployment to GitHub pages. You might also want to take a look at this: https://cli.vuejs.org/guide/deployment.html#github-pages
I read that I would need to set the publicPath to my project name, since currently the website is being served from https://.github.io//, but with that, the whole website is 404-ing.
Indeed, the publicPath property is required to be set to the GitHub repo name, surrounded by slashes (i.e., /github_repo_name/). The 404's are caused by vue-gh-pages removing the leading slash from URLs in index.html:
<!-- <script src=/github-pages-vue-demo/js/chunk-vendors.c4b075fb.js></script> --> <!-- before -->
<!-- <script src=/github-pages-vue-demo/js/app.9b45ea45.js></script> --> <!-- before -->
<script src=github-pages-vue-demo/js/chunk-vendors.c4b075fb.js></script>
<script src=github-pages-vue-demo/js/app.9b45ea45.js></script>
With that property, the whole website would try to load from https://<username>.github.io/<projectName>/<projectName>.
That's a side effect of the slash-removal, making the URLs relative. Relative URLs are relative to the current location (appended to the current directory). For example, with this GitHub pages URL - https://tony19-sandbox.github.io/github-pages-vue-demo/, a relative URL of github-pages-vue-demo/js/app.9b45ea45.js would resolve to:
https://tony19-sandbox.github.io/github-pages-vue-demo/github-pages-vue-demo/js/app.9b45ea45.js
And an absolute URL of /github-pages-vue-demo/js/app.9b45ea45.js would resolve to:
https://tony19-sandbox.github.io/github-pages-vue-demo/js/app.9b45ea45.js
I think that somewhere, there's a setting adding <projectName> to router, but not adding elsewhere.
vue-router has a base property for that purpose, but Vue CLI (#vue/cli-plugin-router) correctly defaults it to process.env.BASE_URL. That environment variable is already equal to publicPath from your Vue CLI config, so there's no need to set it.
Workaround
If you wish to continue using vue-gh-pages, you could use patch-package to disable the slash-removal (index.js line 109) as shown below:
//editForProduction();
if (repository !== null) {
pushToGhPages();
}
GitHub demo
Otherwise, I would skip that library entirely, and use gh-pages directly in a deploy script.
Vue has a configuration for that. If you use vue client then add vue.config.js the next lines por public path property
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './':'/' };
I am working on an MPA with Vue and codeigniter. I have the following architecture:
-htdocs(root)
- application
- src
- views
- models
- controllers
I work with my frontend basically in the src directory and the others are codeigniter MVC model directories. What I am doing is configuring the webpack to build directly in the views directory so that my codeigniter can consume the generated htmls, configured as follows: (in this case I set it up in the vue.config.js file
)
outputDir: './views'
Up to this point everything works fine, wepback does the bundles and generates all the necessary files inside my views directory.The problem now is that the path to the files is the root of the project. Then he tries to fetch the files like this:
<link rel="preaload" href="/css/chunk-common.45fe69c2.css" as="style">
So that it points to the correct path (application/views) I made the following configuration in the vue.config.js:
assetsDir: './views'
But now when he is going to do the build I have the following warning and the files bundle is not completed.
Does anyone know why this happens?
Assuming you want to access static assets under the base URL http://example.com/application/views/..., you'll want to set the publicPath property in your config
// vue.config.js
module.exports = {
outputDir: 'views',
publicPath: '/application/views/',
// ...
}
FYI, if you ever do want to use assetsDir, don't prefix it with ./
A directory (relative to outputDir) to nest generated static assets (js, css, img, fonts) under.
An example would be
assetsDir: 'assets'
which would dump files in views/assets/css, views/assets/js, etc.
I have a Vue CLI application that I'm currently working on that uses code splitting for JS and CSS, and builds almost 1,000 JS/CSS files on running npm run build.
I am hosting this application on Google Cloud Run, where I pay per request. While the cost is still not that significant, I was still looking to try and prevent the need for 500 requests for every page view. I had a thought, but I'm not sure it's possible...
What I was wondering was if I could have my webpack build generate the JS and CSS files into the dist folder, but reference those files in the index.html file with an external host, instead of assuming a relative path. For instance, the file would exist at dist/css/chunk-abc123.js but in index.html, it would be something like https://storage.google.../css/chunk-abc123.js.
That way, in my CI pipeline, I can upload those files from the dist directory into Google Cloud Storage, and serve them up statically from there.
Does anyone know if this is possible? If so, can you guide me in the right direction?
publicPath comes in rescue.
The base URL your application bundle will be deployed at (known as
baseUrl before Vue CLI 3.3). This is the equivalent of webpack's
output.publicPath, but Vue CLI also needs this value for other
purposes, so you should always use publicPath instead of modifying
webpack output.publicPath.
// vue.config.js
module.exports = {
...
publicPath: 'https://storage.google...'
...
}
I have simple vue js app with next express js config file
var express = require('express');
var http = require('http');
var app = express();
var server = http.createServer(app);
app.use(express.static('.'));
server.listen(1111);
Result of build is located in /dist folder. However my express js file is located in /
After I run it I see blank page on localhost:1111 and actually it retrieves index.html from / but, I see my app on localhost:1111/dist and it retrieves index.html from /dist
My purpose is to receive index.html from /dist when I visit localhost:1111.
I've tried to change express config to app.use(express.static('./dist')) and similar to this. But it only breaks anything (i'm not able to reach my app on localhost:1111/dist and localhost:1111/)
In general I have next project structure
/ -> express js config is here and basic index.html is here
/dist -> build result is located here (index.html + static files)
/dist/static -> static files are here
/build -> webpack config is here
The problem why app.use(express.static('dist')); didn't work was that in index.html I had link to other files like /dist/static/.. what is not correct if my root folder is dist. So, despite moderator set that webpack doesn't related to this the solution was to change webpack config for production to make build script generate links to file in /dist/index.html like /static/.. instead of /dist/static/..
And obviously I had to change
app.use(express.static('.'));
to
app.use(express.static('dist'));
As a conclusion - it make sense to check generated index.html and analyze if the paths there are correct.
Sometimes this issue may come because of, the app doesn't server from the root folder.
For example, /home/user/path-to-the-project" The app need to serve like this.
So here you need to change like below,
app.use(express.static(__dirname + '/dist'));
For more information, you check express doc. See here