A bunch of files to kick-start a new FT Interactive project.
It's a bunch of files you can use as a template for a new project. These files are held in a repository on Github. It's similar to Google's Web Starter Kit, but less generic and more FT.
index.htmlwith all our usual boilerplate (header, footer, analytics code, social media meta tags.).
If you haven't already got it, install startfrom:
$ npm install -g startfrom
Then make sure you're in an empty directory, and run this:
$ startfrom ft-interactive/starter-kit
If it finishes with the message "ALL DONE!", you should be good to go.
If you can't use startfrom for any reason, follow these manual steps:
Download a zip of the Starter Kit.
Extract the zip. You should have a folder containing a bunch of files (such as gulpfile.babel.js). Rename the folder to something appropriate for your project.
Delete stuff you don't need: the docs folder and the README.md.
Initialize it as a git repo (git init, or use SourceTree or something) and do an initial commit of all the files in the starter kit (e.g. git add . and git commit -m "starter-kit" – or use your preferred GUI tool instead). This step is a good idea because it means you will always be able to compare with this first commit to quickly see which code you've written as opposed to what came with the starter kit.
cd into your new project, and run npm install.
If that all finishes without errors, you're good to go.
Start the development server like this:
$ npm start
The command output should tell you where your dev server is running (the Local URL) – open this in your browser. (Tip: if you're using iTerm, you can simply CMD+click on the URL and it should open in your browser.)
While the dev server is running, you can edit files within client and your browser should refresh automatically.
The automatic refreshing is done by BrowserSync, which also magically syncs up scrolling and other events between multiple devices, making it easier to develop with a bunch of phones and tablets on your desk.
Remember to commit often – see the git workflow guide.
Run this command to do a full production build:
$ npm run build
That will build a deployable copy of your app to the
There's a deploy task that lets you easily upload the contents of your
dist folder to the IG web server.
Before you deploy for the first time, you'll need to set your deploy target:
gulpfile.babel.jsand find the line
const deployTarget = '';
$ npm run deploy