Home

How to use this template

With Github templates

1. Install required tools:

   npm install -g yo @plone/generator-volto ejs
   

2. Create a new repository from volto-frontend-template - make sure the new reposity name ends with -frontend, e.g.: custom-frontend

3. Clone your new repository on your local machine like:

   git clone https://github.com/eea/custom-frontend
   cd custom-frontend
   

4. Bootstrap Volto project

   npm install ejs sharp png-to-ico xml2js 
   rm -rf package.json package-lock.json
   yo @plone/volto --skip-install --addon @eeacms/volto-eea-kitkat --workspace src/addons/*
   

   • You can also provide --volto 14.0.0-alpha.35 if you want a specific Volto version. By default the latest stable version will be used.
   • It is recommended to generate with --volto 16.30.1 and @plone/[email protected] as installed generator.

5. Run bootstrap

   node bootstrap
   

6. See changes and commit:

   git diff
   git add .
   git commit -m "Initial commit"
   git push
   

7. Install:

   yarn
   

8. Run:

   • Start backend:

     docker-compose up
     

   • Start frontend:

     yarn start
     

   • Go to http://localhost:3000

9. Run Cypress tests

   • Add missing dev dependencies:

     yarn add --dev @cypress/code-coverage
     yarn add --dev cypress-fail-fast
     yarn cypress:open
     

10. Create branch develop from branch master and add branch protections ( Settings -> Brancher -> Branch protection rules -> Add rule ):

    • develop - no check-boxes need to be checked, this is added to protect the branch from deletion. Optional - check "Allow force pushes"
    • master - mandatory to check this 5 boxes to setup the Automated Releases:

      Require a pull request before merging:
        Require approvals 
        Dismiss stale pull request approvals when new commits are pushed 
      
      Require status checks to pass before merging 
      Require branches to be up to date before merging 
      

11. To convert a SVG file to a PNG file run:

    node bootstrap svgtopng 'initialSVGPath.svg' 'outputPNGPath.png'
    

    • initialSVGPath.svg - the path to the initial SVG file
    • outputPNGPath.png - the path where the resulted PNG file will be saved

12. To resize a PNG run:

    node bootstrap resizepng 'intialPNGpath.png' 'width,height' 'outputPNGPath.png'
    

    • intialPNGpath.png - the path to the initial PNG
    • width,height - two values for the desired width and height
    • outputPNGPath.png - the path where the resulted PNG file will be saved

13. To change the background color of a PNG run:

    node bootstrap chagebackgroundcolor 'public/testIcon.png' 'r,g,b' 'public/background.png'
    

    • public/testIcon.png - the path to the initial PNG
    • r,g,b - RGB values to set the desired color
    • public/background.png - the path where the resulted PNG file will be saved