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:
- FTP access to the website you will be working on
- A GitHub account and the GitHub app (OSX/Windows).
- Node.js
- Gulp installed globally (
npm install --global gulp
) - A code editor (Atom on OSX/Linux or Dreamweaver on Windows).
- An FTP client (Transmit on OSX and Dreamweaver on Windows).
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.
In your GitHub app, setup a new repository.
Download the latest release from Skeletal, the development theme's repository.
Extract the
.zip
fileRight-click your new repo in the GitHub app and select Open in Finder
Drag the contents of the extracted
.zip
into your repositoryCommit 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.
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.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
Setup your FTP account in Transmit. You can request one here if you haven't already.
Connect to your site
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
andprivate
.To upload your changes, click the Sync button in at the top of Transmit's UI—but do not proceed any further
Note the Skip items matching rules list option. The most important step is to configure this correctly.
Click the white arrow next to the dropdown
Click the
icon to add a new rule
This new rule should exclude all files called
gulpfile.js
,package.json
andnode_modules
. This will stop Transmit from uploading all of your gulp modules to the server (this would take ages!)Ensure the rest of your settings match the settings below:
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.
First, you need to setup your Site and Server as you would normally in Dreamweaver
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 directorynode_modules
. This will stop Dreamweaver from uploading all of your gulp modules to the server (this would take ages!)Do a full sync to get your site up-to-date.
Now you can get started! Change the local files and push the changes as you go.