I want to know if it is possible to deploy Nuxt app on a shared hosting.
After running npm run build --spa it generated below file structure in the dist directory, but don't know how to go from here.
nuxt dist
Here are some checklists to deploy your spa app on hosting.
Did you configured your nuxt app as spa? You have to set your nuxt application spa mode in nuxt.config.js.
Reference: https://nuxtjs.org/api/configuration-mode/
Can you configure rewrite rule on your hosting? If you build your application via build --spa you need to configure rewrite rule that rewrite all request into index.html. This is sample configuration on Firebase Hosting.
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
If you can't configure rewrite rule on your hosting, then you can build your application via generate.
Reference: https://nuxtjs.org/api/configuration-generate/
All checklist passed, then just upload your dist directory on your hosting! That's all!
Upload whats inside the build which is dist/ folder to public folder or from where the shared hosting domain points to after generating the pages.
If you're just gonna use it statically I suggest you better use some advanced static pages hosting with many benefits such as free ssl, CDN support, and push to deploy. e.g netlify.com, zeit.co/now .
This would only take you few minutes of learning and huge benefits in a lifetime.
Related
I have a backend api in express and a front end in vue.js with typescript.
In my development environment, the front end talks to the backend via a proxy server defined in the vue.config.js file...
module.exports = {
devServer: {
proxy: {
"^/api": {
target: 'http://localhost:3002',
changeOrigin: true,
pathRewrite: {"^/api": "/"}
},
}
}
}
So, my front end expects to be served on [address] and it is expecting the express application to be at [address]/api on the SAME address/url.
I was able to achieve this on Digital Ocean App Platform by setting up 2 'components', a backend served from '/api' and a front end component with the Vue.js stuff in it served from '/' on the same domain.
How can I achieve this in Heroku?
I have seen a lot of people (e.g. https://www.youtube.com/watch?v=W-b9KGwVECs) suggest using a build step that builds the front end, copies the static assets back up into a 'public' folder and then uses express to serve the static assets as well as the rest api using this...
app.use(express.static(__dirname + '/public/'));
But is this really the best way to do it? Seems to me like now Express is responsible for the front end and the backend when they should be seperate concerns. Also, what about scaling the back vs the front?, does this work for CDNs?
This seems like such a common use case for something like Heroku, maybe I am just missing something obvious.
Trying to redirect the http domain to https, as google pages shows the http link in the search results rather than the https one.
Tried to use the redirect-ssl library with several different setups. Firstly npm install redirect-ssl with this in nuxt.config.js
import redirectSSL from "redirect-ssl";
export default {
serverMiddleware: [
redirectSSL.create({
enabled: process.env.NODE_ENV === 'production'
}),
],
}
and also tried just this after npm install redirect-ssl in nuxt.config.js:
export default {
serverMiddleware: ["redirect-ssl"]
}
I was wondering if maybe this doesn't work because it's a static site, but I'm new to development so am not sure.
Your setup is good so far since it followed the documentation: https://github.com/unjs/redirect-ssl#using-with-nuxtjs
If you have http issues with your registrar or in your platform dashboard/server configuration, the issue should be fixed there and not in the code. redirect-ssl won't be able to help here IMO.
Where do you host your app?
How to host Nuxt Static web app in AWS S3?
Firstly, I have tried and known how to generate static static SPA files in ./dist by calling nuxt generate.
Secondly, AWS S3 supports static web hosting, but it seems that the site have to be accessed by visiting the 'index.html' in that bucket.
So, I came to this problem, for example, I got a bucket 'demo2020', and I upload Nuxt/Vue files in the ./dist into that. I have also set the bucket and files in in public. After these, I can visit images in the demo2020 bucket, but the index.html, i.e, http://demo2020.s3-us-west-1.amazonaws.com/index.html could not be visited.
An error page, 200.html was returned, saying:
This page could not be found
Back to the home page
This normally works on standard web server, for example, nginx or http-server/express etc. But no luck on AWS S3 yet.
UPDATE：May 6 2020
This is not problem of aws s3, on the localhost, if index.html from nuxt, same error page. So it seems some configuration incorrect for nuxt.
I get the same issue when using version 2.12.2.
Downgrading to 2.11.0 solved the issue for me.
The url for AWS S3 as static hosting need specific index file appended, i.e. index.html.
Router need to be adjusted, Nuxt provides config for settings directly to vue-router, by using 'router: {}'.
The following config works for this scenario.
// in nuxt.config.js
mode: 'spa',
router: {
mode: 'hash',
},
I'm creating a simple demo app with NuxtJs. The homepage shows static content that is not changed very often. There is another route for showing a list of users: /users. And one for showing user's details: /user/id.
Now my question is what's the difference between nuxt generate and nuxt build? which one should I use?
I think nuxt generate page will not render dynamic routes like users and user/id, Am I right? If I am right, then generate command will generate a pre-rendered HTML for homepage only. So using generate is always better than using build right ?
In universal mode, nuxt generate is for static site generation. nuxt build is for SSR site.
In 2.13.0, Nuxt introduced a target: static feature, make sure to
check it.
A static site has the best performance, and it is easy to deploy on nginx or other services, like Netlify.
By default, nuxt generate only render your static home page and /users page, not the dynamic /user/:id route.
But you can config nuxt to help you generate the dynamic routes.
If you have a fixed set of users, you can use functions to generate the routes.
If the users data is constantly in change, you can config nuxt to fallback to SPA on the dynamic routes. But you can't get any benefit for SEO on the dynamic routes.
For SPA fallback, in the generate config, define a custom page for SPA fallback:
export default {
generate: {
fallback: "custom_sap_fallbackpage.html"
}
}
Config the fallback page for unknow route in your deployment, for example, in Nginx:
location / {
try_files $uri /custom_sap_fallbackpage.html;
}
nuxt build will build you a SSR site. The html is rendered on the server and sent to the client. It add some work load on the server and maybe is not that easy to deploy, but the main gain is the SEO. And to some users with low end devices or slow internet connection, maybe your site will perform better than depolying in SPA mode.
Basically, you need to consider:
The website's content is static or constantly changing?
nuxt generate for static. nuxt generate or nuxt build or spa mode for sites with dynamic routes.
Do you need SEO?
SPA wouldn't get any SEO.
How you deploy the site?
For static hosting service, only nuxt generate or spa mode will work.
your website is heavy with js code, and you want best performance for user with slow internet and slow devices. Or SEO is important for your site with a lot of dynamic content.
SSR is for you, use nuxt build.
There are three different deployment and generation options in Nuxt.
Universal Mode
In this mode you build your project and then you ship it to a node.js server, the first view is always rendered dynamically on the server and then turns into SPA, and works in the client. That's great for SEO, and for consuming API's but you cannot upload it to any hosting, for example on a shared VPS.
So - Node.js Host is required here.
SPA
Well basically how Vue.js works by default, virtually no SEO at all, you can upload it on a shared VPS hosting, because it's just an index.html and build.js file and it's working entirely on the client-side (in the browser).
We can go for a static hosting here.
Static App
This is where Nuxt.js shines, because this mode will generate an index.html file and the corresponding js/css assets for each route you have in the dist folder, and you can then just take those numerous files, and upload them to any hosting, you don't need a server here, because your first views are already pre-rendered, unlike Universal where the node server should pre-render the first view. So you get SSR here, and your main concert as far as I understand is if you get SPA too, and that's the best part as in Universal mode, after the first request the app continues in SPA mode, how great is that eh?
Anyways there are some things you should take into consideration, that if you want to generate index.html for dynamic content you need to make something that's kinda a mood killer. You need to add this to nuxt-config.js
generate: {
routes: () => {
return [
'/posts/1'
]
}
}
You can also use axios to make http request and return array here. Or even export default array from a file and include it here, where you combine all your dynamic routes. It's a one time job, but if you add new crud in your backend, that would add up 1 more request to run on executing nuxt generate that should be described in nuxt-config.
So that's the reason I would prefer to pay more for a server, but to host a Universal App, instead static generated, because that's the part that doesn't make it really great for consuming API's in my personal opinion, but it is a great future anyways.
when you website update data often you don't need to use build by using npm generate your website static, load fast and SEO friendly for search engine and more secure and if your project has data NuxtJS download all data from database and change data to .json file statically.
if your website load data from the database you must use npm build to load data dynamically from database. use mode "spa" for a single page without client-side rendering or "universal" in nuxt.config.js for client-side rendering.
for dynamic routing use npm build for change route parameters from the database.
i am developing a chrome extension, when i run content script on http page, it is ok. But i am confuse why it can't do on https page. Can content script run on https page. And my permissions id like that.
"permissions": [
"http://*/*",
"https://*/*",
"tabs"
],
In addition to including https in the permissions section of your manifest, you also need to include it in the matches section of the content_scripts section:
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["script.js"]
}
]
Content scripts work on https pages. There is probably some other issue.