I've a web built with Nuxt 2 deployed in Vercel where I'm using the #nuxt/content module for rendering some articles. It's using SSR and target: server, and everytime the server hibernates due to lack of activity, the first load takes +10 seconds or directly returns a timeout.
It's caused because when the server does the cold start, it is parsing the documents again reaching the time limit. I'm not sure why is this happening and how can I fix it. I guess moving to ssr: false can maybe help but I'm afraid my SEO can be affected. I believe a better solution should exist just to avoid re-parsing the documents everytime it does a cold start.
Nuxt version: 2.15.7
#nuxt/content version: 1.14.0
#nuxtjs/vercel-builder version: 0.22.1
Running on Node 16
Parsing documents at cold start
nuxt.config.js
export default {
ssr: true,
target: "server",
plugins: [
"#/plugins/articleManager.ts",
"#/plugins/leaflet.client.js",
"#/plugins/device.server.js",
],
components: true,
buildModules: [
"#nuxt/typescript-build",
"#nuxtjs/vuetify",
"vue-ssr-carousel/nuxt",
],
modules: [
"#nuxtjs/pwa",
"#nuxt/content",
"#nuxtjs/sitemap",
"#nuxtjs/robots",
"#nuxt/image",
],
content: {
fullTextSearchFields: ["title", "description"],
},
build: {
build: {
extend(config, { isClient }) {
if (isClient) {
config.devtool = "source-map";
}
},
},
},
srcDir: "src/",
};
vercel.json
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "#vercel/node"
},
{
"src": "nuxt.config.js",
"use": "#nuxtjs/vercel-builder",
"config": {
"serverFiles": [
".nuxt/content/**",
"src/content/**",
"server/**",
".nuxt/dist/sitemap-routes.json"
]
}
}
]
}
I've tried many configurations to avoid the server parsing the documents every cold start but didn't succed. I also tried keep ssr: true with target: static but didn't managed to make it work. And even if it worked, I doubt that would solve the problem.
Thanks!
Related
After upgrading from Nuxt 2.14.12 to Nuxt Bridge, our TogetherJS implementation is not working now. From what I understand TogetherJS is not well maintained anymore but I figured it would at least work in our Vue app.
We're importing the script tag in nuxt.config.js after jquery and bootstrap. And also including a separate together-js-config file
script: [
{
src: "https://code.jquery.com/jquery-3.3.1.min.js",
type: "text/javascript"
},
{
src:
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js",
type: "text/javascript"
},
{
src:
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js",
type: "text/javascript"
},
{
src: "js/together-js-config.js",
},
{
src: "https://togetherjs.com/togetherjs-min.js",
// body: true
}
],
The error that's happening is just "TogetherJS is not defined" when trying to check if TogetherJS is running in the mounted lifestyle hook
if (TogetherJS.running) {
TogetherJS();
}
Does anyone have any suggestions here? Thanks!
I wanna try to use the global "authors" in the blog markdown file "authorsMapPath" this parameter in the docusaurus.config.js file.
However, whatever I tried in the presets or plugins, I always got this error.
A validation error occured.
The validation system was added recently to Docusaurus as an attempt to avoid user configuration errors.
We may have made some mistakes.
If you think your configuration is valid and should keep working, please open a bug report.
ValidationError: "authorsMapPath" is not allowed
Here is my partial setting in the docusaurus.config.js file.
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
// sidebarCollapsible: true,
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/',
},
blog: {
// authorsMapPath: 'authors.yml',
showReadingTime: true,
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/blog/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
plugins: [
[
'#docusaurus/plugin-content-blog',
{
authorsMapPath: 'authors.yml',
// Simple use-case: string editUrl
// editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
// Advanced use-case: functional editUrl
},
],
],
Is there any idea about my error?
Thank you!
I could resolve this issue after I upgraded #docusaurus/preset-classic version from 2.0.0-alpha.72 to 2.0.0-beta.21.
The code became like below:
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
// sidebarCollapsible: true,
sidebarPath: require.resolve('./sidebars.js'),
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/',
},
blog: {
authorsMapPath: 'authors.yml',
showReadingTime: true,
// Please change this to your repo.
editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/blog/',
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
},
],
],
I'm getting a strange error in Gatsby Cloud when I try to host the website.This happened since I added code syntax highlighting. The weird thing is it works perfectly when I run it locally on localhost, but it fails when I build it using Gatsby Cloud. (Gatsby Cloud uses the github repo of my website)
The error message I'm getting:
There was a problem loading plugin /usr/src/app/www/node_modules/#gatsby-cloud-pkg/gatsby-plugin-preview/dist/index.js. Perhaps you need to install its package?
My gatsby-config.js file:
module.exports = {
siteMetadata: {
...
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-image`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-prismjs`,
options: {},
}
]
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `software`,
path: `${__dirname}/src/software`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `post`,
path: `${__dirname}/src/post`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-image`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `GetMyIsland Portfolio`,
short_name: `GetMyIsland Portfolio`,
start_url: `/`,
background_color: `#000000`,
theme_color: `#000000`,
display: `standalone`,
icon: `src/images/icon/LogoTransparent.png`,
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
Like I said the error appeared after installing prismjs and gatsby-remark-prismjs.
Does anyone have an idea on how I can fix this error message, since I wasn't able to find anything on the internet. If you need more information please tell me I'm happy to help.
Just try to remove the plugin that's causing issue and also that plugin/pakage which you think is causing issue and re install them freshly
I have successfully built my app and only remain step is deploy to the host Vercel via my repo on Gitlab
I use Nuxt.js(SSR type) with server Express.js and Nuxt.js Now Builder to deploy host Vercel via repo Gitlab
This is structure
api/
--| index.js
now.json
nuxt.config.js
In index.js
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const products = require("./routes/product/products");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// Import API Routes
app.use(products);
// Export the server middleware
module.exports = {
path: "/api",
handler: app
};
In now.json
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "#nuxtjs/now-builder",
"config": {
"serverFiles": [
"package.json"
]
}
}
]
}
And in nuxt.config.js
...
serverMiddleware: [
// API middleware
"~/api/index.js"
]
...
According to Vercel documentation, deploying is very easy, just commit and push code to Gitlab to complete
However, i always get error as below
I don't understand why? I don't know what i missed. Please help me and i'm very grateful for the help
narze, thank you for your solution, unfortunately it didn't work for me but pointed me in the right direction.
Here is my working now.json:
{
"version": 2,
"env": {
"ON_VERCEL": "true"
},
"builds": [
{
"src": "api/**/*.js",
"use": "#now/node"
},
{
"src": "nuxt.config.js",
"use": "#nuxtjs/now-builder"
}
],
"routes": [
{ "src": "/api/(.*)", "dest": "api/index.js" },
{ "src": "/api", "dest": "api/index.js" },
{ "src": "/(.*)", "dest": "$1" }
]
}
serverMiddleware in nuxt.config.js
serverMiddleware: isServerlessEnvironment ? [] : [
'~/api/index.js'
],
where isServerlessEnvironment defined on the very top of nuxt.config.js as
const isServerlessEnvironment = process.env.ON_VERCEL=="true"
API files need to be compiled with #now/node.
Routes need to be set up to separate nuxt routes from api routes.
With conditional isServerlessEnvironment in nuxt.config.js it works on local server with yarn dev and vercel server.
Credits to this article: Nuxt.js with an Express.js API server running on Now.sh
Thank you all for being helpful :)
I have similar problem with deploying Nuxt on Vercel with serverMiddleware's which returned 405 (Not Allowed). I solved it using this doc Nuxt Vercel Builder by specifying property serverFiles in vercel.json:
{
"builds": [
{
"src": "nuxt.config.js",
"use": "#nuxtjs/vercel-builder",
"config": {
"serverFiles": ["server-middleware/**"]
}
}
]
}
If you need to include files in the server lambda that are not built
by webpack or within static/, such as a local module or
serverMiddleware, you may specify them with this option. Each item can
be a glob pattern.
I know it's a bit late now lol. But I wrote an article to demonstrate the whole process to get your app up and running on Vercel. You can find it here.
The Question:
Is there any way to also set up webpack to work in a fast developement mode?
If only it could be like editing files without a bundler. Make a change - view in browser immediately.
A bit of context:
As far as I know, the goal of using webpack is to pack what you need into as few files as possible and be able to cleanly require() across .js files, but it has the large downside of taking anywhere form a few seconds to mutliple minutes in order to build it, completely destroying a developers headspace when trying to view quick changes.
Specific details of a slow webpack set up:
I have been using a weback.config made by a colleague which combines and uglifys files and packages with the goal of having modulare js and a fast production website:
Webpack.config:
var path = require('path');
var webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
mode: "none",
entry: {
"physiomeportal": "./src/index.js",
"physiomeportal.min": "./src/index.js",
},
output: {
path: path.resolve(__dirname, 'build'),
filename: "[name].js",
library: 'physiomeportal',
libraryTarget: 'umd',
globalObject: 'this'
},
module: {
rules: [
{ test: /\.(html)$/, use: [{ loader: 'html-loader' }]},
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
{ test: /\.(jpe?g|gif)$/i,
loader:"file-loader",
query:{
name:'[name].[ext]',
outputPath:'images/' }
},
{ test: /\.(vs|fs)$/i,
loaders: [
'raw-loader'
]
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
]
},
plugins: [
new UglifyJsPlugin({
include: /\.min\.js$/,
uglifyOptions: {
compress: true
}
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery"
})
]
};
I been using npm run build every time I wish to see changes to a file that uses require()
Webpack-dev-server
Start with using webpack-dev-server.
It has an option for 'hot reloading', where only changed elements of your app will be rebuilt. It aims to adjust in browser without refreshing but depending on your app, that functionality doesn't always work.
Install it using
npm install webpack-dev-server --save-dev
Add it to your webpack.config
"scripts": {
...,
"start:hotdev": "webpack-dev-server --hot",
...
}
Run it
npm run start:hotdev