DEV Community: kevinadhiguna

Could not resolve peer dependency vuex@"^3.0 || ^4.0" with Vuex 4.0.0-rc.2 installed

kevinadhiguna — Mon, 28 Feb 2022 08:04:30 +0000

Background

This post was written since robinvdvleuten/vuex-persistedstate has been archived on February 2022.

However, the issue is still open...

Problem

The error message was shown when I was trying to install dependencies with npm install.

Here was my package.json :

...
"dependencies": {
    ...
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vuex-persistedstate": "^4.1.0",
    ...
},
...

The log of npm install was :

$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: frontend-v2-nuxt2@1.0.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.14" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.2" from vuex@4.0.2
npm ERR! node_modules/vuex
npm ERR!   peer vuex@"^3.0 || ^4.0.0-rc" from vuex-persistedstate@4.1.0
npm ERR!   node_modules/vuex-persistedstate
npm ERR!     vuex-persistedstate@"^4.1.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/kevin/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kevin/.npm/_logs/2022-02-28T07_34_01_560Z-debug.log

Solution

I noticed that the package vuex-persistedstate@"^4.1.0" required vuex@"^3.0 || ^4.0.0-rc". Therefore, I added vuex package :

npm install vuex@^3.0

After that, try installing dependencies with :

npm install

The error was gone this time.

package.json after being updated :

...
"dependencies": {
    ...
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vuex": "^3.6.2",
    "vuex-persistedstate": "^4.1.0",
    ...
},
...

It is clear that vuex as a required package for vuex-persistedstate has been added.

How to setup AWS SES email provider in your Strapi app

kevinadhiguna — Thu, 11 Mar 2021 00:25:36 +0000

When you forgot password and want to reset it, you usually get an email that contains a link to your application. Then it will redirect you to a page where you can create a new password. An operation like this requires an email provider, such as AWS Simple Email Service (SES).

In this article, we will learn how to setup AWS SES email provider in your Strapi app.

Prerequisites :

a Strapi app (Learn how to install Strapi)
a package manager, such as Yarn or NPM

Step 1 : Install Strapi AWS S3 upload provider
Open your terminal, then run :
yarn add strapi-provider-email-amazon-ses
or
npm i strapi-provider-email-amazon-ses --save

Check your package.json if strapi-provider-email-amazon-ses exists. If so, you have successfully installed Strapi AWS SES email provider.

Step 2 : Create plugins.js in config directory
PATH : ./config/plugins.js

module.exports = ({ env }) => ({
 email: {
   provider: 'amazon-ses',
   providerOptions: {
     key: env('AWS_ACCESS_KEY_ID'),
     secret: env('AWS_SECRET_ACCESS_KEY'),
     amazon: `https://email.${env('AWS_REGION')}.amazonaws.com`
   },
   settings: {
     defaultFrom: env('EMAIL_DEFAULT_FROM'),
     defaultReplyTo: env('EMAIL_DEFAULT_REPLY_TO')
   }
 },
}

Configuration

Learn more how to configure Strapi AWS SES email provider

Step 3 : Fill in environment variables
In ./config/plugins.js above, we assigned a lot of environment variables. Now it’s time to fill them in.
PATH : .env (root directory of your Strapi app)

It is not mandatory to include defaultFrom (EMAIL_DEFAULT_FROM) and defaultReplyTo (EMAIL_DEFAULT_REPLYTO) in environment variables but optional.

How do I gain my AWS security credentials ?
Simply sign in to the AWS management console, then open the dropdown menu. Select My Security Credentials.

After that you will see a page like this :

Learn more how to gain your AWS security credentials.

Hooray! It’s time to start your Strapi app and make sure it works. Thanks for reading, hope you have a great day today!

Connect with me :
LinkedIn - kevinadhiguna
Github - kevinadhiguna

References :

How to setup AWS SES email provider in your Strapi app

kevinadhiguna — Thu, 11 Mar 2021 00:24:52 +0000

In this article, we will learn how to setup AWS SES email provider in your Strapi app.

Prerequisites :
Please make sure you have created a Strapi app (Learn how to install Strapi)
A package manager, such as Yarn or NPM

Step 1 : Install Strapi AWS S3 upload provider
Open your terminal, then run :
yarn add strapi-provider-email-amazon-ses
or
npm i strapi-provider-email-amazon-ses --save

Check your package.json if strapi-provider-email-amazon-ses exists. If so, you have successfully installed Strapi AWS SES email provider.

Step 2 : Create plugins.js in config directory
PATH : ./config/plugins.js

module.exports = ({ env }) => ({
 email: {
   provider: 'amazon-ses',
   providerOptions: {
     key: env('AWS_ACCESS_KEY_ID'),
     secret: env('AWS_SECRET_ACCESS_KEY'),
     amazon: `https://email.${env('AWS_REGION')}.amazonaws.com`
   },
   settings: {
     defaultFrom: env('EMAIL_DEFAULT_FROM'),
     defaultReplyTo: env('EMAIL_DEFAULT_REPLY_TO')
   }
 },
}

Configuration

It is not mandatory to include defaultFrom (EMAIL_DEFAULT_FROM) and defaultReplyTo (EMAIL_DEFAULT_REPLYTO) in environment variables but optional.

How do I gain my AWS security credentials ?
Simply sign in to the AWS management console, then open the dropdown menu. Select My Security Credentials.

After that you will see a page like this :

Learn more how to gain your AWS security credentials.

Hooray! It’s time to start your Strapi app and make sure it works. Thanks for reading, hope you have a great day today!

Connect with me :
LinkedIn - kevinadhiguna
Github - kevinadhiguna

References :

How to setup Amazon S3 upload provider in your Strapi app

kevinadhiguna — Thu, 11 Mar 2021 00:17:36 +0000

Strapi, by default, stores all files in public/uploads. In a production environment, you definitely would utilize a service, such as AWS Simple Storage Service (S3). Besides that it makes your Strapi app a stateless application according to the Twelve-Factor App methodology.

In this article, we will learn how to setup AWS S3 upload provider in your Strapi app.

Prerequisites :

A Strapi app (Learn how to install Strapi)
A package manager, such as Yarn or NPM

Step 1 : Install Strapi AWS S3 upload provider
Open your terminal, then run :
yarn add strapi-provider-upload-aws-s3
or
npm i strapi-provider-upload-aws-s3 --save

Check your package.json if strapi-provider-upload-aws-s3 exists. If so, you have successfully installed Strapi AWS S3 upload provider.

Step 2 : Create plugins.js in config directory
PATH : ./config/plugins.js

module.exports = ({ env }) => ({
 upload: {
   provider: 'aws-s3',
   providerOptions: {
     accessKeyId: env('AWS_ACCESS_KEY_ID'),
     secretAccessKey: env('AWS_ACCESS_SECRET'),
     region: env('AWS_REGION'),
     params: {
       Bucket: env('AWS_BUCKET_NAME'),
        StorageClass: env('AWS_S3_STORAGE_CLASSES') // Configure your Amazon S3 Storage Classes (including this to environment variable is not a must)
     },
     logger: console // Only if you want to `stdout` logs
   }
 }
});

Configuration

Please refer to constructor details for complete configuration.

You may be wondering what AWS_S3_STORAGE_CLASSES is. Here are Amazon S3 Storage Classes :
S3 Standard

general-purpose storage of frequently accessed data

S3 Intelligent-Tiering

data with unknown or changing access patterns

S3 Standard-Infrequent Access (S3 Standard-IA) and S3 One Zone-Infrequent Access (S3 One Zone-IA)

for long-lived, but less frequently accessed data

Amazon S3 Glacier (S3 Glacier) and Amazon S3 Glacier Deep Archive (S3 Glacier Deep Archive)

for long-term archive and digital preservation.

Read Amazon S3 Storage Classes for more.

How do I gain my AWS security credentials ?
Simply sign in to the AWS management console, then open the dropdown menu. Select My Security Credentials.

After that you will see a page like this :

Learn more how to gain your AWS security credentials.

Great! Everything is set, next you can start your Strapi app and upload files. Your files will be stored in AWS S3.

Thank you for reading, hope you have a great day today!

Connect with me :
LinkedIn - kevinadhiguna
Github - kevinadhiguna

References :

How to setup AWS SES email provider in your Strapi app

kevinadhiguna — Thu, 11 Mar 2021 00:00:08 +0000

In this article, we will learn how to setup AWS SES email provider in your Strapi app.

Prerequisites :

A Strapi app (Learn how to install Strapi)
A package manager, such as Yarn or NPM

Step 1 : Install Strapi AWS SES email provider
Open your terminal, then run :
yarn add strapi-provider-email-amazon-ses
or
npm i strapi-provider-email-amazon-ses --save

Check your package.json if strapi-provider-email-amazon-ses exists. If so, you have successfully installed Strapi AWS SES email provider.

Step 2 : Create plugins.js in config directory
PATH : ./config/plugins.js

module.exports = ({ env }) => ({
 email: {
   provider: 'amazon-ses',
   providerOptions: {
     key: env('AWS_ACCESS_KEY_ID'),
     secret: env('AWS_SECRET_ACCESS_KEY'),
     amazon: `https://email.${env('AWS_REGION')}.amazonaws.com`
   },
   settings: {
     defaultFrom: env('EMAIL_DEFAULT_FROM'),
     defaultReplyTo: env('EMAIL_DEFAULT_REPLY_TO')
   }
 },
}

Configuration

It is not mandatory to include defaultFrom (EMAIL_DEFAULT_FROM) and defaultReplyTo (EMAIL_DEFAULT_REPLYTO) in environment variables but optional.

How do I gain my AWS security credentials ?
Simply sign in to the AWS management console, then open the dropdown menu. Select My Security Credentials.

After that you will see a page like this :

Learn more how to gain your AWS security credentials.

Hooray! It’s time to start your Strapi app and make sure it works. Thanks for reading, hope you have a great day today!

Connect with me :
LinkedIn - kevinadhiguna
Github - kevinadhiguna

References :

What is CORS ? How to configure CORS in Strapi ?

kevinadhiguna — Wed, 10 Mar 2021 23:48:02 +0000

CORS stands for Cross-Origin Resource Sharing. According to developer.mozilla.org, Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. Simply, it is a web application security feature in a browser.

Image below shows how CORS is implemented :

We can see that domain-a.com contains an image from domain-b.com. However, of course the image from domain-b.com is not stored in the web server of domain-a.com which means the image is fetched from domain-b.com.

So, domain-a.com sends a GET request of image.png to the web server of domain-b.com. This request is called a cross-origin request and it is controlled by CORS in the web server of domain-b.com. In other words, The web server of domain-b.com must allow cross-origin requests from domain-a.com. So that domain-a.com can retrieve the image or whatever it requests.

In Strapi, CORS is controlled in this path :
./config/middleware.js
Then you would like to specify allowed CORS origin which can be only one, or two, even more than three URLs.

Here is an example, if you have multiple URLs as allowed CORS origin :

The theory is that you must set enabled to true then put URLs of allowed CORS origin in your environment variable, in .env file. What .env file contains :

(Please note that of course you are also able to put a single URL as allowed CORS origin)

However, if you do not specify certain URLs in your environment variable, Strapi will recognize a string beside ‘CORS_ORIGIN’ as allowed CORS origin. Split function that comes after is to split the URLs if you have more than a single URL as allowed CORS origin. Otherwise, you do not have to split it. Usually the reason why it has more at least than one URL is :

Your app’s client side
Your Strapi admin panel (still considered as an external source)

Thank you for reading this article! See you in another Strapi post and have a nice day ~

Connect with me :
LinkedIn - kevinadhiguna
Github - kevinadhiguna

Read in Blog : https://about.lovia.life/how-to-configure-cors-in-strapi/

Reference :

Mozilla. ‘Cross-Origin Resource Sharing (CORS)’. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS.
Strapi Middleware Configuration. https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/configurations.html#middlewares

How to disable telemetry in Strapi 📊

kevinadhiguna — Sat, 06 Mar 2021 04:34:43 +0000

Strapi contains a feature in which anonymous and otherwise non-sensitive data is collected. Like any other software, the main aim is to provide the best experience to users.

What data is collected ?

Unique project ID (generated with UUID)
Unique machine ID (generated with node-machine-id)
Environment state (development, staging, production)
System information (OS)
Build configurations

Of course, no personal data is collected and any data collected is secured, encrypted and anonymized.

How do I disable Telemetry in Strapi ?

Simply, please remove uuid in your strapi app’s package.json file.
Before :

After :

If you have any questions regarding collected data usage in Strapi, do not hesitate to send an email to privacy@strapi.io.