Optimer for your project security and performance issues

Sardor Madaminov — Tue, 31 Dec 2024 06:26:04 +0000

Recently i worked on project, which does the below things if you are developing a frontend project and want to optimize and analyze your security or performance pitfalls.

CLI Argument Parsing,
Build and Measure Performance,
Analyze your project's health,
Check for security vulnerabilities,
Optimize build performance,
Automatically detects your project type (Vite or Webpack) and provides insights about:
Bundle sizes
Build times
Dependency health
Security Checks

If you are interested in to contribute or collaborate on this project, you are welcome to do.

And suggestions would be appreciated. Thank you.

Project Npm package link:

Project Npm package link
Project Git Source

Resolving AWS Amplify Build Failures: Keeping Your package.json and package-lock.json in Sync [Solved]

Sardor Madaminov — Sat, 04 Nov 2023 14:05:42 +0000

⚠️ Understanding the Problem:
When building web applications with AWS-Amplify (serverless backend), you may encounter issues during your deployment process. One of the common and of course most frustrating issue i came across recently was the package.json and package-lock.json synchronization error. Before diving into the solution, lets have a clear understanding of the issue first.

Meme from http://www.quickmeme.com/
When deploying your project to AWS Amplify, it is important to understand that AWS Amplify relies on your project’s package-lock.json file to make sure the correct dependencies are installed in. And if there’s a mismatch between your package.json and package-lock.json files, it is inevitable that you will encounter the following error during the process of Frontend build phase:

Entire log of this error can be found on this github issue log link

As you notice this error sometimes can be frustrating to deal with, as because personally, it took me 6 hours to fix the issue. However, there is an effective solution to get around this problem.

⚙️ Solutions
Lets first discuss the most viable solution that usually will solve this issue in AWS Amplify deployment process.

Solution 1:
First approach is to ensure your local development environment has synchronized package.json and package-lock.json files. This is done by following these steps:

Delete your package-lock.json file and the node_modules folder
Re-generate the package-lock.json file by running the following command:

npm install

While this solution works for many, it may not be sufficient for your AWS Amplify environment. And it was true for my case, it did not get the issue resolved. So if you are still facing the issue after trying above method, don’t worry, the second alternative approach will get the job done.

Solution 2:
If syncing the files locally does not resolve this issue, try updating your AWS Amplify build scripts setting. Here is how you can do it:

Navigate to your Aws Amplify Console and open your amplify.yml file [Aws Amplify Console -> App Settings -> Build Settings].
Modify your preBuild setting in the build specification of your app to include the following commands:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install --package-lock-only
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

As you may notice usually only the difference made is the inclusion of the npm install --package-lock-only command, which ensures that your Aws Amplify environment uses the synchronized files. This setting configuration will help you to avoid the synchronization issue during deployment.

⛓ Outro:
Sychcronizing your package.json and package-lock.json files is important to the success of your Aws Amplify deployments. Because if you are facing such issue for the first time, it can be your frustration of hours of searching and learning the issue in depth.

Using the above methods you will save your time and energy to solve this obstacle and keep your Amplify project running smoothly. With a right troubleshooting and right adjustments in the config file, you can resolve the sync issue.

Gif from https://tenor.com/
Remember that key is not to give up when solving such common issues.

Now, you are well-equipped to work around with this challenge. Enjoy your hassle-free Aws Amplify project building experience.

Happy Coding :)

DEV Community: Sardor Madaminov

Optimer for your project security and performance issues

Resolving AWS Amplify Build Failures: Keeping Your package.json and package-lock.json in Sync [Solved]