When developing a MyCashflow theme, you can make your work much easier by synchronizing changes to your local theme files with your online store's file directory automatically. You can do it conveniently by using the mycashflow-sync tool.

Properties

mycashflow-sync is a Node.js-based command line tool that lets you sync the theme files on your computer and in the online store directory either automatically or manually.

The synchronization is bidirectional, meaning that the tool can upload and download files between the local environment and the online store. The synchronization is based on file age: the newer file overwrites the older one. The program will never delete any files.

If necessary, the program can also automatically convert SASS files into CSS styles before synchronization.

In addition, mycashflow-sync will display a preview of the theme under development (Browsersync) whenever a synchronization is performed.

Requirements:

You can use the tool on any operating system that has Node.js (4.0.0 <= version < 10) and the npm package management installed.

The theme under development needs to be in development mode for synchronization to work. Development mode is set by specifying the attribute mode:'development' for the {MinifyCSS} and {MinifyJS} tags.

The online store must have an FTP connection that you can enable by installing the Web Designer extension.

Installation and activation

Open the terminal and install mycashflow-sync by using the following command:

npm install -g mycashflow-sync

Once the tool is installed, create a new theme folder, navigate to it and define the theme synchronization settings with the following commands:

mkdir teemakansio
cd teemakansio
mycashflow-sync init

The program will ask you for the following information (compulsory in bold):

  • FTP server and port (use default values)
  • User ID
  • Password

    The FTP username and password are available in the Web Designer extension settings.

  • Default address of the online store (e.g. https://STORENAME.mycashflow.fi)
  • Theme folder location

    E.g. themes/shop/themefolder or themes/email/themefolder

    If there is no theme folder in the online store's file directory, create it and indicate its name in the synchronization settings.

  • SASS source folder in relation to the theme's root folder (e.g. styles/scss)

    If you define a SASS folder, mycashflow-sync converts SASS files to CSS styles automatically, whenever synchronization is performed.

    If you don't use SASS styles, you can leave the SASS and CSS fields empty.

  • CSS style folder (e.g. styles)

    mycashflow-sync will place SASS files converted into CSS styles into this folder automatically.

After configuring the synchronization settings, you can perform manual synchronization or set the tool to watch changes in the theme files.

If you need to change the synchronization settings, you can edit them in the sync.json configuration file created in the theme folder. Here's an example of possible settings:

{
	"ftp": {
		"host": "ftp.mycashflow.fi",
		"port": 21,
		"user": "<username>",
		"pass": "<password>"
	},
	"sync": {
		"url": "https://KAUPPA.mycashflow.fi",
		"path": "themes/shop/teemakansio",
		"ignore": [
			"./ignored/directory",
			"./*.scss",
			"./*.css.map"
		]
	},
	"sass": {
		/*
		* Syötä tähän tyylitiedostokansioiden sijainti
		* suhteessa teeman juurikansioon
		*/
		"source": "styles/scss",
		"dest": "styles"
	}
}

In the ignore table, you can specify files or file types that shouldn't be synchronized.

Browser preview (Browsersync)

Whenever synchronization is performed, mycashflow-sync displays a browser preview of the online store.

If you indicated the store's address using the https:// prefix in the synchronization settings, most probably your browser will display a warning about insecure connection. Skip the warning to see the preview.

Synchronization of theme files

Once you have defined theme-specific synchronization settings, you can synchronize the local and remote files using the following command:

mycashflow-sync sync

In this way, the latest version of each file will overwrite the older one and all new files will be added if they are missing from the server or local folder.

The synchronization is bidirectional, meaning that that the tool can upload files to the server and download them to the local environment.

If there is a newer file version on the store's server, it overwrites the older local file.

The synchronization will never delete any files.

Watching changes

The following command lets you set mycashflow-sync to watch changes in theme files and perform the synchronization automatically whenever a file is modified:

mycashflow-sync watch

In this way, you won't have to run the synchronization command every time you edit a file and the changes will become visible in the theme as soon as you've saved the file.

mycashflow-sync watches changes both in local and remote files.

Using the mycashflow-sync tool in email themes

If you want to use the mycashflow-sync tool with the default email theme, you'll need to run the build and sync on different tabs:

  1. Open mycashflow-sync watch in one tab.
  2. When necessary, run npm run build in a separate tab.mycashflow-sync will b send your changes to the server, whenever a new build occurs.

mycashflow-sync does not convert the email theme's SASS files to CSS. The build command handles the conversion of SASS styles.

Browsersync does not work with email themes.