Theme Size and Production Steps for Local to Live domain

[liquiddev03]

Hello Guys,
I have installed the theme in my local environment using composer and node modules but once I build the theme for production its size still there near 300 MB.
How I can decrease the theme size because so large I need it in minor MB 10 or 12 MB if possible.

If possible then make video for simple installation to finish at end of upload on live domain.

Thank you.

[steffenbew]

Hey @liquiddev03, to reduce your theme's size for production, you'll need to prepare your code for deployment by running the command npm run build. This will optimise the theme files.

After running this command, make sure to exclude the node_modules folder from the deployment. By doing so, the overall size of your theme should be under 10MB.

For more detailed examples on setting up Flynt deployments, you can refer to this article:
Continuous Deployments for WordPress Using GitHub Actions

[liquiddev03]

Yes I build but still its going to 220MB wihtout node_modules
And yes for Deployment do you have any video tutorial on [Continuous Deployments for WordPress Using GitHub Actions](https://css-tricks.com/continuous-deployments-for-wordpress-using-github-actions/)
On above there is complicated guidance they have not define properly by step just introduce like blog.

[steffenbew]

If the project folder is still that big, I suggest to analyse the size of each of your subfolders to understand where the overall size is coming from.

[liquiddev03]

I reviewed Vendor folder size is very large, does we can reduce any library on it. because I have 30 sites if I will use this theme its goes more then size on server without any used resources

[steffenbew]

The vendor folder stores all the Composer dependencies.

As you add more dependencies, this folder will naturally increase in size. For reference, the Flynt theme's vendor folder is below 15 MB when initially downloaded.

You can further decrease the folder size by excluding dev dependencies before building:
composer install --no-dev

The folder size should then come down to under 3 MB.

[liquiddev03]

Got it, could you please let me know how we can define the dependencies on install time so require file we can install using composer because in general installation its coming more then packages there. I just followed your step in theme installation.
Thank you.

[steffenbew]

No worries, let’s clear this up. You don’t need to define any dependencies manually when installing the Flynt theme. The process is pretty straightforward. Here’s a step-by-step guide to make it easier:

1. Follow the Installation Instructions:

   • Clone the repository or download the theme.
   • Navigate to the theme directory in your terminal.

2. Install Dependencies:

   • Run composer install --no-dev to install PHP dependencies without development packages.
   • Run npm install to install Node.js dependencies.

3. Build for Production:

   • Run npm run build to build the theme.

4. Clean Up:

   • After building, you can delete the node_modules folder to reduce the size further.

Alternatively, if you prefer not to deal with the installation process, you can download the latest prebuilt version of the theme from the releases page. For example, you can download the flynt-2.1.1.zip file and use it directly.

This should give you a much smaller and ready-to-use theme.

[rajpatel2435]

Hi @steffenbew @liquiddev03 @timohubois

To streamline our development process for the Flynt theme, you can enable the Bitbucket Pipeline. This will automate our CI/CD, ensuring that the node_modules and vendor files are handled correctly without manual intervention.

I've attached the Bitbucket Pipeline configuration code, which includes steps to download the necessary node_modules and synchronize with the server for deployment. This setup will help maintain efficiency and consistency in our development workflow.

If you have any questions or need assistance with the configuration, feel free to reach out!

pipelines:
branches:
master:
- step:
name: Clean vendor and install dependencies
image: composer:latest
script:
# Remove vendor folder included in the repository
- rm -rf ./vendor
# Install dependencies
- composer install -o

      # Save dependencies as artifact
      artifacts:
        - vendor/**

  - step:
      name: Build project assets
      image: node:20.11.1
      script:
        # Install dependencies and build assets
        - npm install
        - npm run build:production

      # Save build assets as an artifact
      artifacts:
        - dist/**

  - step:
      name: Rsync to server
      image: node:20.11.1
      script:
        # Install rsync
        - apt-get update && apt-get install -y rsync ssh

        # Set up SSH
        - mkdir -p ~/.ssh
        - echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
        - chmod 600 ~/.ssh/id_rsa

        # Add the remote server to known_hosts to avoid interactive prompt
        - ssh-keyscan -H $SERVER_PRD >> ~/.ssh/known_hosts

        # Delete node_modules folder
        - rm -rf ./node_modules

        # Update the remote with rsync
        - rsync -zrSlh --stats ./ $USER_PRD@$SERVER_PRD:/var/www/html/wp-content/themes/flynt

        # Install JQ
        - apt-get update && apt-get install -y jq