Developing for Maropost Commerce Cloud: Advanced Workflow

There are a number of different workflows you can use when developing websites on the Maropost Commerce Cloud platform. This is the advanced workflow, intended for people familiar with things like Git and Node.js.

Requirements

This workflow requires a few things:

If you have never used Node.js or Gulp, our base templates come preconfigured so you wont even really need to understand how they work.

While this article assumes you're using Github to host your code, you can use another service or choose to avoid this entirely.

Start a New Project

You're looking to develop a new theme on the Maropost Commerce Cloud platform! There are a few simple steps to this.

Step 1 — Start the project on GitHub

To start a fresh repository based on the current development theme, follow the steps below.

  1. In your GitHub app, setup a new repository.

  2. Download the latest release from Skeletal, the development theme's repository.

  3. Extract the .zip file

  4. Right-click your new repo in the GitHub app and select Open in Finder

  5. Drag the contents of the extracted .zip into your repository

  6. Commit your new files!

Note: Make sure you configure git to ignore the node_modules/ folder. You can do this under the Repository settings in the app, or via terminal. Here is our default .gitignore file.

Step 2 — Install Dependencies for your Project

To compile the .less files that make up the styling for Skeletal/your new theme, we recommend using Gulp.

Gulp is a task runner—you essentially define a set of tasks/functions in your projects gulpfile.js file and then you can easily run them on demand via the terminal. Fortunately Skeletal comes with a gulpfile already setup so this process is easy.

Before you can do the following steps you need to setup node.js, which you can do here. You also need to install Gulp globally so you can use it in the command line. For this, you just need to run the following command in your terminal:

npm install --global gulp

Let's continue.

  1. First you need to open up your project in terminal. To do this, right click your Repo in the GitHub app and select Open in Terminal. Alternatively you can navigate to the project via the cd command.

  2. Now, you need to install the Node dependencies. To do this, run the npm install command.

To test to see if this is working, simply run the command gulp and the output should be something like this:

Mikes-MacBook-Air:my-cool-theme mike$ gulp
[10:05:09] Using gulpfile ~/Projects/Themes/my-cool-theme/gulpfile.js
[10:05:09] Starting 'default'...
[10:05:09] Finished 'default' after 10 ms

If successful, Gulp will now be automatically compiling any changes to your themes .less files. You'll see the less function re-run in the terminal every time you modify these files.

Push your changes live

Unfortunately it is not possible to run the Maropost Commerce Cloud front-end locally—so you need to push your change live to the server to see them working.

This is easiest to do with Transmit on OSX and Dreamweaver on Windows. There are two primary reasons for this:

  • You need to be able to upload only the files you have changed to the server.
  • You need to be able to just sync the files in your repo and not replace/remove the other files on the server. This is only a problem because Maropost Commerce Cloud theme assets are stored in a different folder to the template files.

Transmit

  1. Setup your FTP account in Transmit. You can request one here if you haven't already.

  2. Connect to your site

  3. In the local pane (on the left), navigate to your project. You'll notice both the server and your local project share two directories: /httpdocs and private.

  4. To upload your changes, click the Sync button in at the top of Transmit's UI—but do not proceed any further

  5. Note the Skip items matching rules list option. The most important step is to configure this correctly.

  6. Click the white arrow next to the dropdown

  7. Click the icon to add a new rule

  8. This new rule should exclude all files called gulpfile.js, package.json and node_modules. This will stop Transmit from uploading all of your gulp modules to the server (this would take ages!)

  9. Ensure the rest of your settings match the settings below:

  10. You can now click Synchronize. When you make further changes to your files, you will need to do this again. Transmit will check the Modification Date of the file and if it is different to the file on the server, it will replace it with your local file. For extra safety, you should check the Simulate the sync for extra safety option for your first attempt so you can ensure it'll work correctly.

Dreamweaver

Fortunately, Dreamweaver is just as easy to use as Transmit when it comes to working on Maropost Commerce Cloud templates.

  1. First, you need to setup your Site and Server as you would normally in Dreamweaver

  2. Navigate to the local view for your site and cloak the files you wish to exclude—this stops Dreamweaver from uploading them when syncing. You should cloak gulpfile.js, package.json and the directory node_modules. This will stop Dreamweaver from uploading all of your gulp modules to the server (this would take ages!)

  3. Do a full sync to get your site up-to-date.

  4. Now you can get started! Change the local files and push the changes as you go.

Was this article useful?

Be notified when this page is updated. Optional.