I have a Nuxt 3 application (3.0.0-rc.13) generating a static website, and have to deploy to two locations:
Firebase hosting
Amazon S3 bucket
Hosting on Firebase needs a baseUrl of /, and Amazon needs a different baseUrl (/2223/). This can be configured in nuxt config, however I cannot find an cli option to specify which config file to use.
I have tried these, but they just pick the default nuxt.config.ts.
nuxt generate -c nuxt.config.amazon.ts
nuxt generate --config-file nuxt.config.amazon.ts
I found this issue that added support to it for Nuxt 2, but I cannot find anything about it for Nuxt 3. Am I missing something or is it just not supported at all?
Thanks for the solution #kissu
If anyone faces the same problem, here is how I implemented it:
package.json scripts:
"generate": "cross-env DEPLOY_TARGET=default nuxt generate",
"generate:amazon": "cross-env DEPLOY_TARGET=amazon nuxt generate",
nuxt.config.ts
const getBaseUrl = () => {
const environment = process.env.DEPLOY_TARGET;
switch (environment) {
case "amazon":
return "/2223/";
default:
return "/";
}
};
export default defineNuxtConfig({
app: {
baseURL: getBaseUrl(),
},
});
Related
Hi i have a app called Home which has installable plugins which i can install at any point of time which runs in iframe
<Home /home/user/mainprojects/index.html> <-- Home app
<Bed iframe /home/user/plugins/bed/index.html> <-- plugins app
<Bed /iframe>
</Home>
with this nginx setup i'm able to load the plugin app(Bed) with after build(which is heavy time consuming)
here is nginx setup for that
location / {
alias /home/user/mainprojects/dist/;
index index.html;
}
location /Bed {
alias /home/user/plugins/bed/dist/;
index index.html index.htm;
}
Question: i don't want to build main app Home app i want to run it through serve, but second app i,e plugin i will always build which will be available as bundle. with above nginx setup after building both(i,e npm run build, bundle) it will work fine. i want to avoid main app build.
here is how my vue.config.js will look like
module.exports = {
devServer:{
proxy:{
'^/appReplacer':{
target: 'http://100.148.1.9:9003/',
changeOrigin:true,
logLevel:'debug',
pathRewrite: {'^/appReplacer':'/'}
}
}
}
}
Still looking for a solution..
Please help me thanks in advance !!
Assuming you are using Vue CLI v4 which is based on Webpack 4
Webpack DevServer is based on Express framework and allows to setup custom Express middleware using devServer.before option
This way you can configure any path to serve virtually anything you want. For example use the static middleware to serve some static files (dist of your plugin in this case)
Note that following code depends heavily on version of Vue CLI in use. Current release version of Vue CLI 4.5.15 is using "webpack-dev-server": "^3.11.0" which uses "express": "^4.17.1"
// vue.config.js
// express should be installed as it is used by webpack-dev-server
const express = require('express');
module.exports = {
//...
devServer: {
before: function(app, server, compiler) {
app.use('/url/to/plugin', express.static('dist/location/of/your/plugin'));
}
}
};
I am new to Vue js, I am building a website using Vue js where I have a home page and docs folder which contains a lot of documents written and save in a .md file.
Now How I can on the navbar click redirect from my route.js page to docs .md files. Below is my folder structure.
I want to serve my homepage from main.js which is created using vue.js, and docs folder containing markdown files. Inside the docs folder have .vuepress with config.js which was configured to load index.md as the home page.
- docs
- guide
- index.md
- src
- components
- route.js
- vue.config.js
- main.js
Package.json
{
"scripts": {
"docs:build": "vuepress build docs",
"docs:dev": "vuepress dev docs",
"dev": "vuepress dev docs",
"build": "vuepress build docs",
"start": "vue-cli-service serve"
},
}
UPDATE: There are a few issues in your new code:
The app site uses Vue 2, which requires VuePress 1.x, but you have VuePress 2.x installed. If you want the docs and app source in the same project root with different NPM dependencies, you'd need something like a monorepo. To otherwise share NPM dependencies, you'll have to upgrade your app project to Vue 3 or downgrade VuePress. For the sake of example, install VuePress 1.x instead:
npm i -D vuepress#1
The VuePress port is not configured, so it starts at 8080 (until a free port is found). The docs link in your app is hard-coded to port 3000, so your VuePress should be configured to start there:
// docs/.vuepress/config.js
module.exports = {
port: 3000
}
The VuePress base URL is not configured, while your app assumes a base of /docs. Update your VuePress config to set the base URL acccordingly:
// docs/.vuepress/config.js
module.exports = {
base: '/docs/'
}
See GitHub PR
Answer to original question:
VuePress setup
Install vuepress in your project:
$ npm i -D vuepress # if using #vue/cli#4
$ npm i -D vuepress#next # if using #vue/cli#5
Add NPM scripts for Vuepress:
// package.json
{
"scripts": {
"docs:build": "vuepress build docs",
"docs:dev": "vuepress dev docs"
}
}
Create docs/.vuepress/config.js, and export a config object:
a. dest - Output the docs to your app's build output directory (dist for Vue CLI scaffolded projects).
b. base - Set the base URL so that it matches the intended destination on the server (e.g., set base URL to docs if deploying docs to https://example.com/docs/).
c. port - Set the port of the VuePress dev server (we'll configure Vue CLI's dev server to point there later).
d. themeConfig.nav - Set the top navbar links.
// docs/.vuepress/config.js
module.exports = {
dest: 'dist/docs',
title: 'My Project Docs',
base: '/docs/',
port: 3000,
themeConfig: {
nav: [
{
text: 'Guide',
link: '/guide/',
},
{
text: 'Main Project',
link: 'http://localhost:8080'
}
],
}
}
Add a docs link to your app's navbar (e.g., in App.vue):
<nav>
Docs 👈
<router-link to="/">Home</router-link>
...
</nav>
Create docs/README.md with the following contents:
# Hello World
Building
Build your app before the docs (especially if the app's build command deletes the output directory beforehand, as it does with Vue CLI):
$ npm run build
$ npm run docs:build
Development
If using Vue CLI, configure the dev server to redirect /docs to the VuePress dev server:
Configure Vue CLI's devServer.before:
// vue.config.js
module.exports = {
devServer: {
before: app => {
// point `/docs` to VuePress dev server, configured above
app.get('/docs', (req, res) => {
res.redirect('http://localhost:3000/docs')
})
}
}
}
Start the app's server and the docs server:
$ npm run serve
$ npm run docs:dev
You could add the the docs folder into the public directory, then link to /docs/guide/...
I have a Nuxt project. Everything is OK when I generate a static page.
However, I need to send a POST request to the other server.
I tried to use both a proxy in nuxt.config.js and just direct query, but after deploy to the ngnix eventually, nothing works.
Please help.
UPDATE. Steps to reproduce.
Create Nuxt App including axios and proxy
Configure your proxy for other webservice:
proxy: {
'/api': {
target: 'http://example.com:9000',
pathRewrite: {
'^/api': '/',
},
},
changeOrigin: true,
},
call this service somewhere in the code:
const result = await this.$axios.post('/api/email/subscribe', {email: email})
run "yarn dev" and test the service. It works locally properly.
run 'nuxt generate' and deploy the static code hosting service, for example, hosting.com
run your page which calls the above-mentioned service.
As a result, instead of making POST call to the hosting.com/api/email/subscribe, it calls localhost:3000/api/email/subscribe.
Be sure to install the nuxt versions of axios and proxy in your project #nuxt/axios and #nuxtjs/proxy
after that in your nuxt.config.js add axios as module plus this options for axios and proxy:
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
//more modules if you need
],
/*
** Axios module configuration
*/
axios: {
proxy: true,
// See https://github.com/nuxt-community/axios-module#options
},
proxy: {
'/api/': {
target: process.env.AXIOS_SERVER, // I use .env files for the variables
pathRewrite: { '^/api/': '' }, //this should be your bug
},
},
now you can use axios in any part of the code like this
const result = await this.$axios.post('/api/email/subscribe', {email: email})
it will internally resolve to AXIOS_SERVER/email/subscribe without cause cors issues.
EXTRA: test enviroments in local using multiples .env files
you can configure .env for dev and .env.prod for production, after that in local you can use yarn build && yarn start for test your app with your production enviroment. You only need add this at the top of your nuxt.config.js file
const fs = require('fs')
const path = require('path')
if (process.env.NODE_ENV === 'production' && fs.existsSync('.env.prod')) {
require('dotenv').config({ path: path.join(__dirname, `.env.prod`) })
} else {
require('dotenv').config()
}
By definition on the Nuxt docs page what nuxt generate does is: Build the application and generate every route as a HTML file (used for static hosting).
Therefore, using proxy is out of question here. Take note that you path is not even being rewritten.
And probably the result you're looking for is not hosting.com/api/email/subscribe (wit /api), but hosting.com/email/subscribe.
Nevertheless, if you use nginx then I don't think you should use Nuxt's proxy option. Nginx is built just for that so point your API calls there and in nginx config file just declare where it should point further.
This seems like a simple Nuxt question, but I just can't figure it out.
When running "NPM run dev" I want to set the Axios baseURL to "localhost/api" and when running from the dist folder after "NPM run generate" I want the baseURL to be "/api".
Is there a simple solution?
This is the way to do it through the nuxt.config.js:
let development = process.env.NODE_ENV !== 'production'
module.exports = {
axios: {
baseURL: development ? 'http://localhost:3001/api' : 'https://domain/api'
},
modules: [
'#nuxtjs/axios'
],
}
As you can see, you should specify full URL of your backend, including domain (except SPA-only mode).
And don't forget to install #nuxtjs/axios as dependency to try the example.
you can also set api from outside (eg package.json scripts) by env variable
my package.json fragment (there is additional complexity when browser uses different
api url then server side rendering, still all is supported by Nuxt itself with variables API_URL_BROWSER and API_URL)
"scripts": {
"dev-prodapi": "API_URL=https://kairly.com/api nuxt",
"dev": "API_URL=http://localhost:8000/api nuxt",
"dev-spa-prodapi": "API_URL=https://kairly.com/api nuxt --spa",
"dev-spa": "API_URL=http://localhost:8000/api nuxt --spa",
"build": "API_URL_BROWSER=https://kairly.com/api API_URL=https://internal-apihost/api/ nuxt build --modern=server",
"start": "API_URL_BROWSER=https://kairly.com/api API_URL=https://internal-apihost/api/ nuxt start --modern=server",
and using no axios section in nuxt config at all.
In Nuxt 3 we can use a .env file. Here's the doc.
# .env
API_URL=http://localhost:8080/api
// nuxt.config
export default defineNuxtConfig({
runtimeConfig: {
// Private keys are only available on the server
apiSecret: '123',
// Public keys that are exposed to the client
public: {
apiUrl: process.env.API_URL
}
}
})
// MyComponent.vue
<script setup>
const config = useRuntimeConfig()
console.log(config.public.apiUrl)
</script>
I have deployed the contents of my /dist folder in the master branch of christopherkade.github.io, which has deployed my website succesfully.
But when I navigate using the navbar (christopherkade.com/posts or christopherkade.com/work) and reload the page I get an error by Github pages:
404 File not found
Note that my routing is done using Vue router like so:
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/work',
name: 'Work',
component: Work
},
{
path: '/posts',
name: 'Posts',
component: Posts
},
{ path: '*', component: Home }
]
})
And my project is built like such:
build: {
// Template for index.html
index: path.resolve(__dirname, '../docs/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../docs'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
What could be causing this issue?
But when I navigate using the navbar (christopherkade.com/posts or
christopherkade.com/work) and reload the page 404 File not found
Let me explain why 404 File not found is being shown
When christopherkade.com/posts is triggered from web browser, the machine to which the domain christopherkade.com is mapped is contacted.
The path /posts is searched in its server. in your case, i believe the route for /posts doesn't exist in the server. As the result 404 is displayed
There are few ways to fix this
To prevent the browser from contacting the server when triggering the request christopherkade.com/posts, you can keep mode : 'hash' in your route configuration
How mode : 'hash' works? This is one way to fix your issue
mode : 'hash' makes use of default browser behavior which is to prevent http request from triggering the details that exists after #
As the result, when you trigger christopherkade.com/#/posts , christopherkade.com is being triggered by the browser and once response is received the /posts route from the route config is invoked.
Lets assume that you have control over the server and you are adamant
that you need # to be removed from the URL
Then what you could do is to configure server in such a way that server responds with the same page everytime any paths is being sent. Once response is received in the browser, route will automatically kicked off.
Even in your current program, the routeConfig gets kicked off when you click any links (like work,posts) in your page. This is because the browser behavior is not being invoked at this point.
In your case, you use github for hosting this app with mode: 'history' i myself have to look for a specific solution to workaround this. i will update my answer once i get it.
i hope this was useful.
You can fix this issue by a simple workaround. I combined all the insights from reading multiple issues about this and finally this is what helped me fix this problem.
Solution Logic - You just need a copy of index.html with the name 404.html in the dist folder
Steps to fix
Go to you package.json file, under scripts add a new script called "deploy" like below, you just need to execute this everytime after you build your page. It will automatically take care of the issue.
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "cd dist && cp index.html 404.html && cd .. && gh-pages -d dist"
},
This will copy the index.html & rename it 404.html and pushes dist folder under the branch gh-pages and after that your script will appear in the vue ui like below
or
If you are using git subtree push --prefix dist origin gh-pages method to push, then edit the deploy script in package.json to below
"deploy": "cd dist && cp index.html 404.html
and then execute the below git command. PS, don't forget to execute this script before manually using npm script method or from the vue ui
git subtree push --prefix dist origin gh-pages
This actually happens since your browser makes a request to christopherkade.com/posts URL which doesn't exist (this route is defined in Vue application running from index.html).
If you were running your own server, you would probably configure it to render your index.html page for any request URI, so your Vue application would be loaded from any path and handle routing by itself.
Speaking of GitHub pages, you can't just configure them to act the same way I described, but fortunately, there is a workaround which uses custom 404 page:
https://github.com/rafrex/spa-github-pages
As a workaround, I duplicated the index.html and renamed it to 404.html.
In this way, if the page is reloaded, you still get the correct page however this is served through the 404.html file.
As a workaround I have created folders for each route (with a script) and placed the index.html in all of them.
404s still don't work.
If you use Nuxt, this fixes the problem.
layaouts/blank.vue
<template>
<nuxt />
</template>
pages/redirect.vue
<template>
<div></div>
</template>
<script>
export default {
layout: 'blank',
fetch({base, redirect, query}) {
const param = query.p
if (param === undefined) {
return redirect('/')
}
const redirectPath = '/' + param.replace(base, '')
return redirect(redirectPath)
}
}
</script>
static/404.html
<html>
<head>
<script>
var pathName = window.location.pathname;
var redirectPath = '/<repository-name>/redirect';
location.href = redirectPath + '?p=' + encodeURI(pathName);
</script>
</head>
</html>
https://gist.github.com/orimajp/2541a8cde9abf3a925dffd052ced9008
Very simple perfect solution just follow the below instruction
Add a _redirects file inside the /public folder like /public/_redirects
After that add /* /index.html 200 into the _redirects file
I think with this solution your redirect problem will be solved