Nuxt.js static app is loading indefinitely - deployment

I just finished a Nuxt.js project, and I want to deploy it on a web server. So, I executed the command nuxt generate to have a static app. Before this, everything was working perfectly, but now nothing is working : the page is loading indefinitely with a rotating black and gray round in the center of the page.
Here is a picture
EDIT:
I am hosting my app on OVHcloud, and here is a public repo of my app : https://github.com/maximehamou/public.mh-info.fr.
Here is my nuxt.config.js
export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: false,
target: "static",
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "Accueil | MH info",
htmlAttrs: {
lang: "fr",
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" },
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
script: [{ src: "https://kit.fontawesome.com/048c7a73f1.js/" }],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ["./css/general.css"],
server: {
port: 4000,
},
};
Here is my package.json
{
"name": "mh-info.fr",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"sass": "sass -w scss:css"
},
"dependencies": {
"buttercms": "^1.2.9",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"sass": "^1.54.9",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
}
}

Update regarding my latest changes on a cloned version of your project.
I achieved to have something properly working here: https://kissu-makes-great-sites.netlify.app/fr/tous-les-articles
Main conclusion is that there is a LOT of things to fix/improve on.
You're not writing your app as you should with Vue (even less in a Nuxt way).
There is too much to cover into a single response, so I recommend that you ping me on Twitter, Discord or by email if you want a more in-depth explanation/mentoring on how to fix all of this.
PS: I speak french, lived there for 20 years. 🇫🇷

Related

Strapi 4.1.5 email plugin configuration

Unable to change email configuration. I specify the settings according to the instructions.
Restarted the server.
Removed cache and node_modules
In any case, the default plugin configuration is used.
node v14.18.2
strapi 4.1.5
{
"name": "strapi-test",
"private": true,
"version": "0.1.0",
"description": "A Strapi application",
"scripts": {
"develop": "strapi develop",
"start": "strapi start",
"build": "strapi build",
"strapi": "strapi"
},
"devDependencies": {},
"dependencies": {
"#strapi/plugin-i18n": "4.1.5",
"#strapi/plugin-users-permissions": "4.1.5",
"#strapi/provider-email-nodemailer": "^4.1.5",
"#strapi/strapi": "4.1.5",
"sqlite3": "5.0.2"
},
"author": {
"name": "A Strapi developer"
},
"strapi": {
"uuid": "87e9d8e3-8c82-4c8e-8de4-990c2b729be4"
},
"engines": {
"node": ">=12.x.x <=16.x.x",
"npm": ">=6.0.0"
},
"license": "MIT"
}
SOLUTION https://github.com/strapi/strapi/issues/12919#issuecomment-1075954840
in case anyone looking for the answer for this.
like derick says, in strapi v4 the provider and providerOptions need to be wrapped inside config.
like this
module.exports = ({ env }) => ({
// ...
email: {
config: {
provider: 'nodemailer',
providerOptions: {
host: env('SMTP_HOST', 'smtp.gmail.com'),
port: env('SMTP_PORT', 465),
auth: {
user: env('SMTP_USERNAME', 'email#gmail.com'),
pass: env('SMTP_PASSWORD', 'password'),
},
},
settings: {
defaultFrom: 'email#gmail.com',
defaultReplyTo: 'email#gmail.com',
},
},
},
// ...
});

How to Resolve "Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript'" in Vue SFC

I'm getting this strange error with eslint inside of a Vue SFC template.
Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (1:0) (Which appears to be throwing on the opening tag of the Vue SFC <template> tag.)
Here's the Vue SFC (literally the stock Vite App.vue file)
<template>
<img
alt="Vue logo"
src="./assets/logo.png"
>
<HelloWorld
msg="Hello Vue 3 + Vite"
/>
</template>
Here's my .eslintrc file
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:vue/essential',
'airbnb-base',
],
parser: '#babel/eslint-parser',
parserOptions: {
ecmaVersion: 12,
requireConfigFile: false,
sourceType: 'module',
},
plugins: [
'vue',
],
rules: {
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
'vue/no-multiple-template-root': 'off',
},
};
And my package.json in case it's relevant
{
"version": "0.0.0",
"scripts": {
"build": "vite build",
"dev": "vite",
"lint": "eslint **/*.{js,vue}",
"serve": "vite preview"
},
"dependencies": {
"ky": "^0.28.5",
"vue": "^3.0.5"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/eslint-parser": "^7.15.0",
"#vitejs/plugin-vue": "^1.2.3",
"#vue/compiler-sfc": "^3.0.5",
"eslint": "^7.32.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-vue": "^7.17.0",
"jest": "^27.1.0",
"vite": "^2.3.7"
}
}
I'm not really sure what would cause this since I have
extends: [
'plugin:vue/essential',
'airbnb-base',
],
and
plugins: [
'vue',
],
within .eslintrc.
I'd like to know how to resolve this, but I would also like to understand what's going on here to cause this error to be thrown in the first place.
The issue was being caused by this within .eslintrc
parser: '#babel/eslint-parser',
parserOptions: {
ecmaVersion: 12,
requireConfigFile: false,
sourceType: 'module',
},
It should instead be
parserOptions: {
ecmaVersion: 12,
parser: '#babel/eslint-parser',
requireConfigFile: false,
sourceType: 'module',
},
The parser property isn't even mentioned within https://eslint.org/docs/user-guide/configuring/language-options#specifying-parser-options so it might just be outdated at this point.

JS Doc is displaying description wierdly

Problem
I am busy writing out a tutorial for myself about jenkins and I am using jsdoc to do it.
anyways I noticed on the homepage that the section that reads the Readme.md is displaying very strangely.
jsdoc.json
{
"source": {
"include": ["src"],
"includePattern": ".+\\.js(doc|x)?$",
"excludePattern": "(node_modules/|docs)_"
},
"plugins": ["plugins/markdown"],
"tags": {
"allowUnknownTags": true,
"dictionaries": ["jsdoc","closure"]
},
"templates": {
"cleverLinks": true,
"monospaceLinks": true
},
"opts":{
"recurse": true,
"destination": "./docs/",
"tutorials": "./tutorials",
"readme": "README.md"
}
}
README.md
# LearningJenkins
## Tutorials
<!-- [Link to tutorials](https://codenameninja.github.io/LearningJenkins/) -->

Can't use EJS hook in Strapi showing error TypeError: ctx.render is not a function

What is the bug?
I am trying to render a page using strapi-hook-ejs but it is not working even I followed all official documentation.
It is giving following error
[2020-10-13T03:34:15.198Z] error TypeError: ctx.render is not a function
at Object.page (C:\Users\noman\Desktop\TestAPI\api\home\controllers\home.js:11:20)
at dispatch (C:\Users\noman\Desktop\TestAPI\node_modules\koa-router\node_modules\koa-compose\index.js:44:32)
at next (C:\Users\noman\Desktop\TestAPI\node_modules\koa-router\node_modules\koa-compose\index.js:45:18)
at dispatch (C:\Users\noman\Desktop\TestAPI\node_modules\koa-compose\index.js:42:32)
at C:\Users\noman\Desktop\TestAPI\node_modules\strapi\lib\middlewares\router\utils\routerChecker.js:79:28
at dispatch (C:\Users\noman\Desktop\TestAPI\node_modules\koa-compose\index.js:42:32)
at module.exports (C:\Users\noman\Desktop\TestAPI\node_modules\strapi-plugin-users-permissions\config\policies\permissions.js:86:9)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async C:\Users\noman\Desktop\TestAPI\node_modules\strapi-utils\lib\policy.js:68:5
at async serve (C:\Users\noman\Desktop\TestAPI\node_modules\koa-static\index.js:59:5)
at async C:\Users\noman\Desktop\TestAPI\node_modules\strapi\lib\middlewares\xss\index.js:26:9
[2020-10-13T03:34:15.212Z] debug GET /home/page (39 ms) 500
[2020-10-13T03:34:15.255Z] debug GET /favicon.ico (1 ms) 200
Steps to reproduce the behavior
I installed strapi-hook-ejs (npm i strapi-hook-ejs --save)
Create a new hook.json file in config folder. (./config/hook.json)
Added this code
{
"ejs": {
"enabled": true,
"layout": false,
"viewExt": "ejs",
"partial": true,
"cache": false,
"debug": true
}
}
Created views folder and a home.ejs file in it (./views/home.ejs) with this code <h1><%=title%></h1>
Then I created a new controller and point a route to it.
module.exports = {
page: async ctx => {
return ctx.render('home', {title: 'My app title'});
},
};
Now when I am going to this route I am getting the error.
Expected behavior
Should render home page
My Package.json
{
"name": "source-api",
"private": true,
"version": "0.1.0",
"description": "A Strapi application",
"scripts": {
"develop": "strapi develop",
"start": "strapi start",
"build": "strapi build",
"strapi": "strapi"
},
"devDependencies": {},
"dependencies": {
"axios": "^0.20.0",
"strapi": "3.1.4",
"strapi-admin": "3.1.4",
"strapi-connector-mongoose": "3.1.4",
"strapi-hook-ejs": "^3.2.3",
"strapi-plugin-content-manager": "3.1.4",
"strapi-plugin-content-type-builder": "3.1.4",
"strapi-plugin-email": "3.1.4",
"strapi-plugin-upload": "3.1.4",
"strapi-plugin-users-permissions": "3.1.4",
"strapi-provider-upload-cloudinary": "^3.1.4",
"strapi-utils": "3.1.4"
},
"author": {
"name": "Nehal Ahmad"
},
"strapi": {
"uuid": "1034d7e9-73ba-49d4-8862-0d5d62ae7008"
},
"engines": {
"node": "12.x",
"npm": "6.x"
},
"license": "MIT"
}
System
Node.js version: v12.18.1
NPM version: 6.14.5
Strapi version: 3.1.4
Database: Mongo db
Operating system: Windows 10 pro
I have tried it on latest version of strapi.
I found answer on forum.strapi.io from user larsonnn
https://forum.strapi.io/t/cant-use-ejs-hook-showing-error-typeerror-ctx-render-is-not-a-function/416/9?u=nehal_ahmad

How to interact with Windows Authentication and Users group using React.js .Net

I am curious how one would interact with Windows Authentication using React.js.
We have a little internal portal we are trying to set up, we already have predefined users groups and users that are in them. We are looking for a way to get those Authenticated credentials to the view using React.js. There are a couple of good links on how to get started with Reactjs.net but I don't see any tutorials on passing credentials to Reactjs.
Any suggested reading? Tutorials or maybe you know yourself and can provide direction?
enter link description here
I've found this really cool tutorial!
It says:
Here’s a minimal setup for React and Webpack based on what we did in this article. Now that you understand the steps, you can copy-paste this to your heart’s content.
package.json
Note: agentkeepalive is only needed for fixing a Windows authentication error with Hot Module Replacement.
{
"name": "ReactWebPackMVC5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server –open –hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"agentkeepalive": "^3.5.1",
"babel-loader": "^8.0.2",
"react": "^16.5.0",
"react-dom": "^16.5.0",
"webpack": "^4.18.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
}
}
webpack.config.js
Again, agentkeepalive is only needed for fixing a Windows authentication error with Hot Module Replacement. The same is true for the agent and onProxyRes properties.
const path = require("path"); const agent = require("agentkeepalive")
module.exports = { mode: "development", entry: "./Scripts/react/app.js", //or app.jsx output: { path: path.resolve(__dirname, "./Scripts/react/dist"), filename: "bundle.js", publicPath: "Scripts/react/dist" }, resolve: { extensions: ["*", ".js", ".jsx"] }, module: { rules: [ { test: /\.(js|jsx)/, exclude: /node_modules/, use: { loader: "babel-loader", options: { “presets”: [“#babel/preset-env”, “#babel/preset-react”] } } } ] }, devServer: { proxy: { "*": { target: "http://localhost:59829", changeOrigin: true, agent: new agent({ maxSockets: 100, keepAlive: true, maxFreeSockets: 10, keepAliveMsecs: 100000, timeout: 6000000, keepAliveTimeout: 90000 // free socket keepalive for 90 seconds }), onProxyRes: (proxyRes) => { var key = "www-authenticate"; proxyRes.headers[key] = proxyRes.headers[key] && proxyRes.headers[key].split(","); }, }, port: 8080, host: "0.0.0.0", hot: true, }, } };