I have hosted a Web app in Azure DevOps, the application built with Vue and Nuxt.
#vue/cli 5.0.1 and "nuxt": "^2.15.8". After hosting the web application works fine, I can login, then it navigates me to the listing page. But from there when I refresh the page it's showing this error. Sorry, check with the site admin for error: EISDIR .. in the browser and throwing a 500 Error in the console. In my login response I get only access token, there is no refresh token, could that be an issue? or any other settings in the Azure side? We tried setting this in the azure pm2 serve /home/site/wwwroot --no-daemon --spa. Still it's not working. Everything works fine in my dev environment.
export default {
ssr: false,
head: {
title: 'BBG Returns Self Service',
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' }],
},
plugins: ['~/plugins/clearTokens.js'],
components: true,
buildModules: ['#nuxtjs/style-resources'],
env: {
BASE_URL: 'https://my-api-url',
},
publicRuntimeConfig: {
baseURL: process.env.BASE_URL,
},
router: {
mode: 'history',
},
styleResources: {
// scss: ["~assets/scss/main.scss"],
},
modules: ['#nuxtjs/i18n'],
build: { transpile: [/^#storefront-ui/] },
server: {
port: 4200,
},
i18n: {
locales: [
{
code: 'en',
iso: 'en-GB',
name: 'English',
file: 'en.json',
icon: 'uk.svg',
},
{
code: 'de',
iso: 'de-DE',
name: 'Deutsch',
file: 'de.json',
icon: 'de.svg',
},
],
lazy: true,
langDir: 'i18n/',
defaultLocale: 'en',
detectBrowserLanguage: false,
},
target: 'static',
}
If deploying an SPA app, you need to have both:
target: 'static' (the default being 'server')
ssr: false
This removes quite some benefits regarding SEO + performance but at least, you still get all the benefits of the Nuxt DX and ecosystem.
To host it on Azure, you have several approaches, if you're using:
a static app, you can follow this official documentation for Azure Static Web Apps: https://nuxtjs.org/deployments/azure-static-web-apps/
a SSR app, you can follow this one about Azure Portal: https://nuxtjs.org/deployments/azure-portal
The actual issue was the Azure configuration. The resource should be created as Static website, then it will work fine.
Please follow this official documentation to understand How to Deploy in Azure.
https://nuxtjs.org/deployments/azure-static-web-apps/
Related
To start off, this is my first post on stackoverflow so I hope I'm doing it right...
So my Webpack alliases work in browser, but not in node
I have a package (let's call it Services) with a subfolder dev and another project (let's call it MobX) which uses Services. In Mobx, I have a webpack configuration which is supposed, in development mode, change the paths of Services to have access to the subfolder dev instead.
Here's a sample of the code :
const devConfig = {
...commonConfig,
mode: "development",
devtool: "cheap-module-source-map",
entry: "./src/lib/index.ts",
output: {
path: outputDir,
library: name,
libraryTarget: "umd",
globalObject: "this",
},
optimization: {
minimize: false,
},
plugins: [...commonConfig.plugins, forkTsCheckerWebpackPlugin],
resolve: {
...commonConfig.resolve,
alias: {
"#intuition/services-apis$": "#intuition/services-apis/dev",
},
},
};
const devConfigNode = {
...devConfig,
target: ["node"],
name: "node",
output: {
...devConfig.output,
filename: splitChunks ? "[name].[contenthash].node.js" : "index.node.js",
},
};
const devConfigBrowser = {
...devConfig,
target: ["web", "es5"],
name: "browser",
output: {
...devConfig.output,
filename: splitChunks ? "[name].[contenthash].browser.js" : "index.browser.js",
},
};
I don't understand why, in node, it doesn't go into #intuition/services-apis/dev. In works fine in browser but no matter what I do, in node, it doesn't work. I have been at this day for days now and I can't seem to figure it out.
If my explanation wasn't clear enough and needs more details, please do not hesitate to ask any question.
currently I'm uploading something file. Succeed when uploading the file to Google Cloud Storage, but when get the file, I have getting error something like this
If I check and see detail, the source is wrong, for example, the correct link should be like this https://storage.cloud.google.com/cms-strapi-storage/thumbnail_cloudsql_ae61374abd/thumbnail_cloudsql_ae61374abd.png
Anyone can help me? Thank you
My reference and package got from this source : https://www.npmjs.com/package/strapi-provider-upload-google-cloud-storage#setup-auth
The issue already solved!
The way to solve that issue is
Cause the env is production mode, in Strapi v4, you should create everything files into config/env/production
Create file plugins.js, fill it like this.
const fs = require('fs');
require('dotenv').config();
module.exports = ({ env }) => ({
upload: {
config: {
provider: 'strapi-provider-upload-google-cloud-storage',
providerOptions: {
serviceAccount: JSON.parse(fs.readFileSync(process.env.GCS_SERVICE_ACCOUNT)),
bucketName: env('GCS_BUCKET_NAME'),
basePath: env('GCS_BASE_PATH'),
baseUrl: env('GCS_BASE_URL'),
publicFiles: true,
uniform: false,
gzip: true,
},
},
},
});
The key is publicFiles, because if value is false it doesn't create public url in Google Cloud Storage and we cannot get and see the image
Addition notes, don't forget to add security in order to get permission from GCS (Google Cloud Storage)
module.exports = [
'strapi::errors',
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
'connect-src': ["'self'", 'https:'],
'img-src': ["'self'", 'data:', 'blob:', 'storage.googleapis.com'],
'media-src': ["'self'", 'data:', 'blob:', 'storage.googleapis.com'],
upgradeInsecureRequests: null,
},
},
},
},
'strapi::cors',
'strapi::poweredBy',
'strapi::logger',
'strapi::query',
'strapi::body',
'strapi::favicon',
'strapi::public',
];
While building the gatsby project, I faced this kind of error.
yarn develop
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
Cannot find module 'sanitize.css/page.css'
Require stack:
- D:\UpworkJobs\Nate\dci-gatsby-importexport\node_modules\postcss-normalize\dist\index.cjs.js
File: src\css\preview.css
failed Building development bundle - 366.725s
Here is a screenshot of the error log.
These kinds of errors occur even if I removed all CSS codes from the style files.
It seems importing CSS files is not working. If I didn't import the CSS files, the errors go away.
Here are all codes of gatsby-config.js
let systemvars = false;
if (process.env.NODE_ENV === "production") {
systemvars = true;
}
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
systemvars
});
// Gatsby automatically sets NODE_ENV to `development` or `production` when running `gatsby develop` or `gatsby build`, respectively.
// Thus make sure you have .env.development or .env.production setup (unless your CI/build env vars are already set globally)
const AliasConfig = require("./alias.config.js");
module.exports = {
siteMetadata: {
title: `DCI DigiGuide Print`,
description: `DCI DigiGuide Printable Version`,
author: `#designbycosmic`,
siteUrl: process.env.SITE_URL,
},
plugins: [
//
// * App Functionality Plugins
//
// eslint plugin
{
resolve: "gatsby-plugin-eslint",
options: {
test: /\.js$|\.jsx$/,
exclude: /(node_modules|.cache|public)/,
stages: ["develop"],
options: {
maxWarnings: undefined,
emitWarning: true,
failOnError: false,
failOnWarning: false,
},
},
},
// allows content to be placed in head
`gatsby-plugin-react-helmet`,
// adds web manifest for some pwa functionality
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-dci-digiguide-print`,
short_name: `DigiGuidePrint`,
start_url: `/`,
background_color: `#222c47`,
theme_color: `#222c47`,
display: `minimal-ui`,
icon: `./src/images/favicon.png`, // This path is relative to the root of the site.
},
},
// allow alias imports
{
resolve: "gatsby-plugin-alias-imports",
options: {
alias: AliasConfig.map,
extensions: AliasConfig.extensions,
},
},
// inline svgs instead of converting them to base64
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /svg/,
},
},
},
`gatsby-plugin-postcss`,
`gatsby-plugin-material-ui`,
// Craft CMS configuration
{
resolve: `gatsby-source-graphql`,
options: {
url: process.env.CRAFT_API_URL,
typeName: "Craft",
fieldName: "craft",
headers: {
Authorization: `bearer ${process.env.CRAFT_API_TOKEN}`,
},
},
},
// Get build date
{
resolve: `gatsby-plugin-build-date`,
options: {
formatAsDateString: false,
},
},
],
};
Help me to solve this problem.
In my case I was able to solve by adding the following configuration in package.json.
"resolutions": {
"sanitize.css": "12.0.1"
},
Finally, this problem has been solved.
Using yarn instead of using npm solved the problem.
Remove node_modules and yarn install
After that, the problem has gone away.
Thank you.
I am using the swagger UI interface to test my node js requests.
I added the Authentication for those requests but when I try them in swagger I have the following issue:
If I add a bearerAuth token in the swagger UI When I click on execute in one of my requests, they are not executed. If I don't put a bearerAuth token my request plays as intended.
To add a token I added those options :
const openApi = OpenAPI({
schema,
info: {
title: '**** API',
version: '1.0.0',
},
components: {
securitySchemes: {
bearerAuth: {
type: 'http',
scheme: 'bearer',
bearerFormat: 'JWT',
},
},
},
security: {
bearerAuth: [],
},
});
security must be an array:
security: [
{ bearerAuth: [] }
],
I'm quite new to node.js, so bear with me. I've set up a basic Portfolio site using node, express, and some bootstrap, and everything runs fine locally (on github). When I deploy and/or start my app on nodejitsu I get this message:
info: Updating app Portfolio
info: Activating snapshot 0.0.1-4 for Portfolio
info: Starting app Portfolio
info: App Portfolio is now started
info: http://builtbysean.jit.su on Port 80
info: Nodejitsu ok
Seems okay? Well upon visiting the url I am greeted by a Nodejitsu 400 error "builtbysean.jit.su is currently stopped."
Immediately running $ jitsu apps view reveals that my app is indeed stopped (see active: false, running: false near the bottom)
info: Viewing app Portfolio
data: {
data: dependencies: { express: '3.3.4', jade: '0.33.0' },
data: name: 'Portfolio',
data: domains: [],
data: config: {},
data: scripts: { start: 'node app.js' },
data: user: 'deanlai',
data: subdomain: 'builtbysean',
data: drones: 0,
data: maxDrones: 1,
data: engines: { node: '0.8.x', npm: '1.3.2' },
data: snapshots: [
data: { id: '0.0.1', created: '07/18 22:52:26 PDT' },
data: { id: '0.0.1-1', created: '07/19 10:28:24 PDT' },
data: { id: '0.0.1-2', created: '07/19 18:23:52 PDT' },
data: { id: '0.0.1-3', created: '07/19 18:33:22 PDT' },
data: { id: '0.0.1-4', created: '07/19 19:44:14 PDT' }
data: ],
data: ctime: '07/18 22:51:06 PDT',
data: subscriptionId: 3627690,
data: version: '0.0.1-4',
data: active: {
data: id: '0.0.1-4',
data: md5: '7a484e5758bdaf1c89d01a98d53868a4',
data: filename: 'deanlai-Portfolio-0.0.1-4.tgz',
data: ctime: '07/19 19:44:14 PDT',
data: active: false,
data: running: false
data: },
data: databases: {},
data: mtime: '07/19 19:48:48 PDT',
data: env: { SUBDOMAIN: 'builtbysean', NODE_ENV: 'production' }
data: }
Any idea what's going on? I'm not getting any errors thrown on my end so it's difficult to diagnose. I also made the simple hello app in nodejitsu's starting guide and it deployed, started, and stayed running without issue, so it would seem there is something "wrong" with my app that is causing nodejitsu to stop running the app (again, there are no problems running it locally).
Your app may be error looping. I had experienced same case before. Check your logs and see if you will get a clue
jitsu logs
Otherwise, contact their support (https://www.nodejitsu.com/support/)
You may also go to their IRC webchat - webchat.jit.su