Synchronizing theme files with the mycashflow-sync tool

Attributes

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.

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, you can use the following commands to create a new theme folder, navigate to it and define the theme synchronization settings:

mkdir themefolder
cd themefolder
mycashflow-sync init

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

• FTP server and port (use the 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 the theme folder first and include its name in the synchronization settings.

• SASS source folder in relation to the root folder of the theme (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 necessary, you can change the synchronization settings by editing the sync.json configuration file created in the theme folder. Below is an example of possible settings:

{
	"ftp": {
		"host": "ftp.mycashflow.fi",
		"port": 21,
		"user": "<username>",
		"pass": "<password>"
	},
	"sync": {
		"url": "https://STORENAME.mycashflow.fi",
		"path": "themes/shop/themefolder",
		"ignore": [
			"./ignored/directory",
			"./*.scss",
			"./*.css.map"
		]
	},
	"sass": {
		/*
		*Enter here the location of the style file folders
		*in relation to the theme's root folder
		*/
		"source": "styles/scss",
		"dest": "styles"
	}
}

In the ignore table, you can specify files or file types that should not be synchronized.

Browser preview (Browsersync)

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

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

Updating the mycashflow-sync tool

To upgrade mycashflow-sync to the latest version, enter the following command below in the terminal:

npm update -g mycashflow-sync

If you want to update mycashflow-sync to a version that is not the latest version, you can use the command below (replace the number sequence at the end with the version number you want):

npm install -g mycashflow-sync@0.5.4

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.

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.