Guide to updating your Project Using Pinx

Introduction

This guide will help you update your project that uses the Pinx template. By following these steps, you can integrate the latest features and fixes offered by the new version of Pinx.

Steps to Update Your Project

1. Backup Your Current Project

Before you begin, it is essential to create a backup of your project. This will allow you to restore the previous state in case something goes wrong during the update process.

2. Download the New Version of Pinx

From ThemeForest: Log in to your ThemeForest account and download the latest available version of Pinx.
From the Git Repository: Clone or download the repository using the following command:
```
git clone [repository-URL]
```

Note

If you need access to the Git repository but do not have the necessary permissions, you can request access by opening a ticket titled "Pinx - Git Access" on the ticketing platform at the following address: https://dverse.freshdesk.com/support/tickets/new. The form will require your "Purchase code," which you can retrieve by following the steps outlined in the ThemeForest documentation.

3. Update ESLint and Prettier

Pinx integrates ESLint and Prettier to ensure high code quality and consistent formatting.

ESLint: A static code analysis tool that helps identify and fix issues in your JavaScript, such as syntax errors and stylistic inconsistencies.
Prettier: A code formatter that automates code formatting, ensuring a uniform style throughout the project.

Before proceeding, update the eslint.config.mjs file to the latest version. Then, run the following commands:

npm run lint && npm run format

Running these commands will automatically correct syntax errors and apply consistent formatting rules to your code. This automation reduces the need for manual corrections, minimizes the risk of merge conflicts, and enhances code readability. As a result, comparing different versions of your project becomes faster and more efficient.

4. Compare Differences Between Versions and Update Files

Use a comparison tool to compare your project’s files with those of the new Pinx version. This will help you identify any remaining differences and ensure that all changes have been correctly integrated.

For example, if you use VSCode you can use the Diff Folders extension (https://marketplace.visualstudio.com/items?itemName=L13RARY.l13-diff) to compare the files:

In this step, you will need to update the following elements to align your project with the new version of Pinx:

Store: Verify and update Vuex or Pinia stores to ensure compatibility with new features.
Configuration Files: Compare and update configuration files such as:
- tailwind.config.js
- vite.config.js
- nuxt.config.js (if applicable)
- tsconfig.json (TypeScript)
- cypress.config.ts
- .prettierrc.json
- eslint.config.mjs
- design-tokens.js
- vitest.config.js
Components:
- Layout: Update layout-related components (app-layouts/ folder) to reflect any structural changes.
- Non-Layout: Update functional and application-specific components (components/ folder).
Composable: Integrate or update composable functions to leverage new features and improvements.
Assets SCSS: Update SCSS files (assets/scss/ folder) to align styles with new specifications and design tokens.

5. Update Dependencies

Open the package.json file from the new version of Pinx.
Compare the dependencies with those in your project.
Update your package.json to reflect the new versions of the dependencies.

Run the following command:

# npm
npm install
# yarn
yarn install
# pnpm
pnpm install

6. Test and Build the Project

Development Environment Testing:
Start the application with:
```
npm run dev
```
- Navigate through the various features to ensure everything functions correctly.
- Check the browser console for any errors or warnings.
Production Build:
Once you have verified that everything works in the development environment, create the production build:
```
npm run build
```
- Test the application in the production environment to ensure optimal performance and functionality.