Developing for Neto by Maropost: Advanced Workflow

There are a number of different workflows you can use when working with themes on the Neto platform. This is the advanced workflow, intended for people familiar with things like Git and Node.js.

Requirements

This workflow requires the following:

SFTP access to the website you will be working on
A GitHub account and familiarity with git commands or the GitHub app (OSX/Windows).
Node.js version 12 (use nvm to easily maintain your Node version)
Gulp installed globally (npm install --global gulp)
A code editor such as Atom on OSX/Linux or Dreamweaver on Windows.
An SFTP client such as 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.

Build your theme

Once you have your developer tools setup you can begin developing your custom theme.

Step 1 — Start the project on GitHub

To start a fresh repository based on the current Neto Skeletal Theme:

In your GitHub app, setup a new repository.
Download the latest release from the Skeletal repository.
Extract the .zip file
Right-click your new repo in the GitHub app and select Open in Finder
Drag the contents of the extracted .zip into your repository
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

All Neto themes use SASS to customise theme styling. To compile the .scss files for a theme we use Gulp, and recommend you do as well.

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 ensure you have Node v12 installed, which you can do here or by using nvm. You should also have Gulp installed globally so you can use it in the command line. If you haven't already, you just need to run the following command in your terminal to install Gulp:

npm install --global gulp

Don't worry about the local Gulp version, as this is handled by Skeletal. Let's continue.

First you need to open up your project in a 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 .scss files. You'll see the sass function re-run in the terminal every time you modify these files.

Code your theme

Now that you have installed all dependencies and have Gulp watching for styling changes you can begin coding your new theme. Click here for an overview of our theme folder and template structure.

Once you have finished development, or want to test your changes - create a dist folder within your project folder and copy the entire src folder into it, rename the src folder to the name of your theme. Inside that folder, locate the skeletal-netothemeinfo.txt file within the templates folder, rename this to {your_theme_name}-netothemeinfo.txt and modify the contents to better reflect your custom themes description.

Finally, locate the skeletal-style.css file within the css folder and rename this to just style.css.

As long as you are not making any additional SASS changes, you can continue to customise the theme templates within this new theme folder. If you need to make any SASS changes, do so in your original project folder (ensure gulp is running) then repeat the steps in this section to generate a new installable version of your theme code. If you make any changes directly to the themes app.css file, these will be replaced the next time you run the gulp command. So ensure any styling changes are made using SASS to avoid changes being lost.

Push your changes to the server

It is not possible to run a Neto theme locally — so you will need to push the theme folder in your project dist folder to a Neto webstore server to see them working. To do so, connect to the webstore server using your SFTP client. All themes are stored on the server under /httpdocs/assets/themes.

Sync local changes with the server (optional)

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 Neto 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 and private.
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 and node_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 Neto 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 directory node_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.

Preview your theme

Once your custom theme has been uploaded to a Neto webstore server there are two ways to preview it on the frontend. Either set your new theme as the active theme under Webstore Settings or the Theme Editor. Or use the nview={theme_name} URL query to see the theme in your browser without changing the current live theme.