I have a Strapi V4 dashboard deployed on heroku. Everything works fine, except for some images not being able to be deleted, with a Status code: 500 error.
plugins.js file below
screenshot of error on strapi
upload: {
config: {
provider: "cloudinary",
providerOptions: {
cloud_name: env("CLOUDINARY_NAME"),
api_key: env("CLOUDINARY_KEY"),
api_secret: env("CLOUDINARY_SECRET"),
},
actionOptions: {
upload: {},
delete: {},
},
},
},
The fix was to comment out config of cloudinary in plugins.js
That is not really SOLVING THE ISSUE:
Ok, after deactivating the cloudinary plugin the images in strapi “Media Library” can be deleted. But the same issue happens again when activating the cloudinary plugin.
Related
I'm hosting my App on an EC2-instance behind an Elastic Load Balancer which manages my SSL-Certificate. On this EC2-Instance my nginx-configuration is redirecting all http-Requests to https.
I recently switched to Vite which caused me a lot of trouble. When I push my app to the server after calling npm run build my assets are blocked. In the browser console I get:
Mixed Content: The page at 'example.com' was loaded over HTTPS, but requested an insecure ...
My Setup:
vite.config.js
export default defineConfig({
server: {
host: 'localhost',
},
plugins: [
laravel([
'resources/assets/sass/app.sass',
// etc...
]),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
Setting "https: true" in the server-block didn't help me.
.env
APP_ENV=production
APP_URL=https://example.com
ASSET_URL=https://example.com
In my blade template I'm using the Vite-directive:
#vite('resources/assets/sass/app.sass')
I tried the following solutions:
Setting $proxies = '*' in TrustProxies.php, which doesn't have any effect.
Setting URL::forceScheme('https'); in AppServiceProvider.php, which will load the assets but lead to a lot of other issues.
Somehow the #vite-directive is not resolving my assets as secure assets. With Laravel Mix I could just call secure_asset.
How can I fix this?
In the end I used the TrustedProxies-middleware. However back then I forgot to register it as global middleware.
import fs from 'fs';
const host = 'example.com';
server: {
host,
hmr: {host},
https: {
key: fs.readFileSync(`ssl-path`),
cert: fs.readFileSync(`ssl-cert-path`),
},
},
you should add this to vite.config.js file along with ASSET_URL to your .env file
I'm working with Strapi v4.1.7 and I'm trying to upload my images to Cloudinary in a specific folder (portfolio) but they just get added to the root folder of cloudinary.
Also I'm using "#strapi/provider-upload-cloudinary": "^4.1.9", package.
My plugins.js is as follows:
module.exports = ({ env }) => ({
// ...
upload: {
config: {
provider: "cloudinary",
providerOptions: {
cloud_name: env("CLOUDINARY_NAME"),
api_key: env("CLOUDINARY_KEY"),
api_secret: env("CLOUDINARY_SECRET"),
},
actionOptions: {
upload: {
folder: env("CLOUDINARY_FOLDER", "portfolio"),
},
delete: {},
},
},
},
// ...
});
Also in my .env file, I have the folder set as follows:
....
CLOUDINARY_FOLDER=portfolio
Also, I was asking is it possible to create dynamic folders in Cloudinary like '/portfolio/Project1/all-project1-assets' from Strapi for all projects.
I need help to achieve this. Thanks !!!
Just change the Upload to uploadStream as highlighted below :
`actionOptions: {
uploadStream: {
folder: env("CLOUDINARY_FOLDER", "portfolio"),
},
delete: {},
},
`
You might have to create a upload preset in cloudinary, go to your Cloudinary Settings > Upload > Upload presets > Add upload preset, and then create a upload preset with a folder and in Signed Mode.
After adding an image to my collection/single type the preview image Strapi shows is not displaying see here.
I inspected the img src and the src address is correct and the url correctly takes me to where the image is stored see here.
Does anyone know why / how to get the preview image working??
I am using the following:
strapi - v4.1.3
strapi-provider-upload-azure-storage - v2.0.0
node - v16.8.0
Azure storage and CDN
I fixed this issue by adding the following to my ./config/middlewares.js file:
module.exports = [
'strapi::errors',
'strapi::cors',
'strapi::poweredBy',
'strapi::logger',
'strapi::query',
'strapi::body',
'strapi::session',
'strapi::favicon',
'strapi::public',
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
directives: {
'connect-src': ["'self'", 'https:'],
'img-src': ["'self'", 'data:', 'blob:', `${AZURE_CDN_URL}`],
'media-src': ["'self'", 'data:', 'blob:', `${AZURE_CDN_URL}`],
upgradeInsecureRequests: null,
},
},
},
},
];
I have also encountered this issue when using other cloud provider, eg. Cloudinary. I found that this is a security middleware issues, anyone facing this issue on other providers can go to https://github.com/strapi/strapi/tree/master/packages/providers
Inside each provider guide, there's a section of:
Security Middleware Configuration
Due to the default settings in the Strapi Security Middleware you will need to modify the contentSecurityPolicy settings to properly see thumbnail previews in the Media Library. You should replace strapi::security string with the object bellow instead as explained in the middleware configuration documentation.
I fixing that error by using this settings:
module.exports = ({ env }) => [
"strapi::errors",
{
name: "strapi::security",
config: {
contentSecurityPolicy: {
directives: {
'connect-src': ['self', 'http:', env("SUPABASE_URL")],
'img-src': ['self', 'data:', 'blob:', , env("SUPABASE_URL"), 'https://dl.airtable.com'],
},
},
},
},
"strapi::cors",
"strapi::poweredBy",
"strapi::logger",
"strapi::query",
"strapi::body",
"strapi::session",
"strapi::favicon",
"strapi::public",
];
into middleware.js
After restarting thumbnail preview start working properly.
I created a Strapi app using the latest version, the new 4.0 and I wanted to deploy it to Heroku. I did follow the Strapi documentation in order to do so, like explained in this page. Now I'm getting an error that I don't understand, I guess it has something to do with postgres. This is the error
2021-12-18T15:26:26.658380+00:00 app[web.1]: [2021-12-18 15:26:26.656] debug: ⛔️ Server wasn't able to start properly.
2021-12-18T15:26:26.659122+00:00 app[web.1]: [2021-12-18 15:26:26.658] error: Unknow dialect undefined
2021-12-18T15:26:26.659123+00:00 app[web.1]: Error: Unknow dialect undefined
2021-12-18T15:26:26.659123+00:00 app[web.1]: at getDialectClass (/app/node_modules/#strapi/database/lib/dialects/index.js:12:13)
2021-12-18T15:26:26.659123+00:00 app[web.1]: at getDialect (/app/node_modules/#strapi/database/lib/dialects/index.js:19:23)
2021-12-18T15:26:26.659124+00:00 app[web.1]: at new Database (/app/node_modules/#strapi/database/lib/index.js:38:20)
2021-12-18T15:26:26.659124+00:00 app[web.1]: at Function.Database.init (/app/node_modules/#strapi/database/lib/index.js:84:33)
2021-12-18T15:26:26.659125+00:00 app[web.1]: at Strapi.bootstrap (/app/node_modules/#strapi/strapi/lib/Strapi.js:347:30)
2021-12-18T15:26:26.659125+00:00 app[web.1]: at Strapi.load (/app/node_modules/#strapi/strapi/lib/Strapi.js:410:16)
2021-12-18T15:26:26.659125+00:00 app[web.1]: at async Strapi.start (/app/node_modules/#strapi/strapi/lib/Strapi.js:161:9)
Apart from doing what is explained in the docs I linked, I just added a few collections using the UI in development mode. How can I fix this error and deploy to Heroku this new 4.0 version of Strapi?
I had a similar issue when I was connecting pg locally and then realised my connection config was incorrect. When I replaced it with v4 template it worked.
path: config/database.js
module.exports = ({ env }) => ({
defaultConnection: "default",
connection: {
client: "postgres",
connection: {
host: env("DATABASE_HOST", "localhost"),
port: env.int("DATABASE_PORT", 5432),
database: env("DATABASE_NAME", "bank"),
username: env("DATABASE_USERNAME", "postgres"),
password: env("DATABASE_PASSWORD", "0000"),
schema: env("DATABASE_SCHEMA", "public"),
},
}
});
And for Heorku as the article suggested:
path: config/env/production/database.js:
const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);
module.exports = ({ env }) => ({
connection: {
client: 'postgres',
connection: {
host: config.host,
port: config.port,
database: config.database,
user: config.user,
password: config.password,
ssl: {
rejectUnauthorized: false
},
},
debug: false,
},
});
PS: make sure you add pg-connection-string to your dependencies before pushing to heroku
getDialectClass - from the error log
const getDialectClass = client => {
switch (client) {
case 'postgres':
return require('./postgresql');
case 'mysql':
return require('./mysql');
case 'sqlite':
return require('./sqlite');
default:
throw new Error(`Unknow dialect ${client}`);
}
};
where the client is - db.config.connection
So if you have been following previous solutions - which talked about a connections object etc ( like this )
module.exports = ({ env }) => ({
defaultConnection: 'default',
connections: {
default: {
connector: 'bookshelf',
settings: {
client: 'postgres',
host: config.host,
port: config.port,
database: config.database,
username: config.user,
password: config.password,
ssl: {
rejectUnauthorized: false,
},
},
options: {
ssl: true,
},
},
},
});
db.config.connection would return undefined. & so it would fail
Configuring the DB with - https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/required/databases.html#configuration-structure
Works fine
If you are using typescript in Strapi, we may encounter this issue too as there is a issue affecting Strapi typescript capabilities.
I can resolve the problem when I downgraded Strapi to 4.3.2 from 4.3.8
You can check this method using heroku/cli from strapi docs here, but it's the same thing, i'm using version 4.0.2, this methods works on older versions V3, i think the docs needs update, most of it is deprecated, for example "fetching only data (example: posts/project etc..) related to the authenticated user who created it", most of resources related to this topic in docs and forum are deprecated solutions that don't work in V4.
For the deployment, i have the same issue, i tried a lot of solutions but it didn't work for me to, but i managed to get the server running like this:
but i got this problem when i visit the "/admin" page:
Strapi is really interesting, let's hope they update the docs soon and someone respond with a solution here.
I fixed this issue by using database url directly. Not sure why the old way does not work in Strapi v4.
module.exports = ({ env }) => ({
defaultConnection: "default",
connection: {
client: "postgres",
connection: {
connectionString: process.env.DATABASE_URL,
ssl: {
rejectUnauthorized: false
}
},
}
});
In case someone meets the same problem as me.
In my situation, I am using vim in windows as my text editor. After editing the "config/database.js" file. It left a "database.js~" file in that directory. Then, this filename causes the same problems: "Error: Unknown dialect undefined".
I guess it's a bug in strapi. After removing that file, everything works!
So, the solutions for me. I add this line to my vim config file:
set backupdir=~/.vimbackup
Then create a directory named '.vimbackup' in "C:/User/[me]/" .
Strapi has once again changed the database configuration structure and even their deployment docs use the old and incorrect example.
Here is the most up to date example: Strapi Database Configuration
In strapi v4, you need to use like:
module.exports = ({ env }) => ({
connection: {
client: "postgres",
connection: {
host: env("DATABASE_HOST", "localhost"),
port: env.int("DATABASE_PORT", 5432),
database: env("DATABASE_NAME", "db-name"),
user: env("DATABASE_USERNAME", "postgres"),
password: env("DATABASE_PASSWORD", "password"),
schema: env("DATABASE_SCHEMA", "public"),
},
}
});
it's look like there is a problem in the new strapi version , when i try to create project with typescript support i faced same error , i don't know if you are using typescript in your project but these two solutions solved my problem;
solution (1) :- create compile config ts files with tsc $ tsc .\config\database.ts .\config\server.ts ./ .\config\admin.ts
solution (2) :- downgrade your strapi to 4.3.2 version in the package.json file.
solution (3) :- don't use #latest when creating strapi app instate use 4.3.2 npx create-strapi-app#4.3.2 test-strapi-verion-with-ts --ts
you can use one of theme
UPDATE: I installed Strapi version 3.6.3 and it works well
Strapi - Clouinary connection do not work for me. So I'm uploading pictures to Stapi, but they don't appear in Clouinary.
In config folder I created file plugins.js with following content:
module.exports = ({
env
}) => ({
// ...
upload: {
provider: 'cloudinary',
providerOptions: {
cloud_name: env('CLOUDINARY_NAME'),
api_key: env('CLOUDINARY_KEY'),
api_secret: env('CLOUDINARY_SECRET'),
},
},
// ...
});
I have installed npm i strapi-provider-upload-cloudinary
then changed file .env to
PORT=1337
CLOUDINARY_NAME="***"
CLOUDINARY_KEY="***"
CLOUDINARY_SECRET="***"```
Actually automatically following code added automatically:
```JWT_SECRET=*********
API_TOKEN_SALT=*********
JWT_SECRET=*********
What could be a problem?
should CLOUDINARY_SECRET be in "quotes"? or in 'quotes' or without quotes?
Terminal output after adding image is following:
http://localhost:1337
[2021-12-07 02:10:14.702] http: POST /upload (261 ms) 200
[2021-12-07 02:10:14.744] http: GET /upload/files?sort=updatedAt:DESC&page=1&pageSize=10 (24 ms) 200
[2021-12-07 02:10:14.758] http: GET /uploads/thumbnail_Screenshot_2021_11_26_130226_11a95e81ea.png?width=1504&height=1258 (4 ms) 200
All permissions seems to be set...
Also created extentions/upload/config/setting.json with the following content:
"provider": "cloudinary",
"providerOptions": { "cloud_name":"devert0mt",
"api_key": "***",
"api_secret":"***"
}
}{
"provider": "cloudinary",
"providerOptions": { "cloud_name":"devert0mt",
"api_key": "***",
"api_secret":"***"
}
}```
If you want to use the latest version of Strapi, v.4 and above, you need to change strapi provider package to this one:
npm install #strapi/provider-upload-cloudinary --save
Then, you need to update your plugins.js file in config/plugins.js to the following ( Be aware that it has a slightly different structure than the previous package - everything is placed in config object, instead of upload like it was on a previous version):
module.exports = ({ env }) => ({
// ...
upload: {
config: {
provider: 'cloudinary',
providerOptions: {
cloud_name: env('CLOUDINARY_NAME'),
api_key: env('CLOUDINARY_KEY'),
api_secret: env('CLOUDINARY_SECRET'),
},
actionOptions: {
upload: {},
delete: {},
},
},
},
// ...
});
Also, if you are having issues with properly rendering your images on your Strapi dashboard you can update middlewares.js in config/middlewares.js:
Instead of 'strapi::security' in module.exports, paste this:
// ...
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
'connect-src': ["'self'", 'https:'],
'img-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
'media-src': ["'self'", 'data:', 'blob:', 'res.cloudinary.com'],
upgradeInsecureRequests: null,
},
},
},
},
// ...