Name: starter-kit
Owner: FT Interactive News
Description: A template for Financial Times responsive and interactive graphics projects
Created: 2015-10-22 13:54:04.0
Updated: 2017-12-22 23:57:51.0
Pushed: 2018-01-03 18:51:22.0
Size: 1620
Language: HTML
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
A template for IG projects ? everything you need to build a standalone front end app (including some basic FT page furniture), configured to automatically deploy to the web.
To start a new project based on Starter Kit, run this setup script in your terminal:
"$(curl -s https://ig.ft.com/starter-kit/install)"
What the setup script does:
.netrc
containing the following:ine api.github.com
n <your-github-username>
word <your-github-access-token>
ocol https
npm install
to grab all the dependencies (this takes a few minutes).npm start
for the first time ? now you can start coding.You can also re-initialise a Starter Kit project to use the latest version by providing a path to an existing project in the first step of the wizard. This will put everything in the folder into a new commit (including things that aren't version controlled and aren't in .gitignore), wipe the folder, then add Starter Kit as a new commit. It doesn't try to upgrade your code at all, though you can generally restore everything by running the following afterwards:
checkout HEAD~1 -- client config
This assumes your project keeps most of your data in the client/
and config/
folders.
You can run the following tasks from within your project directory:
npm start
? starts up a development server and opens your app in a web browser. The dev server will automatically reload your browser when files change.npm run build
? builds your app and puts it in the dist
folder.npm run deploy
? deploys the contents of your dist
folder to an appropriate location on S3. (You usually don't need to run this yourself ? it is run automatically by CircleCI.)npm run a11y:local
- checks accessibility of your app running locally(You can find a few other, less interesting tasks defined in package.json
.)
client
? the main files that make up your front end, including index.html
and some Sass and JS files. You should mostly be working in here.config
? scripts that pull together some configuration details for your project, including basic facts (UUID, title, etc.) and 'onward journey' story links. These details are used to populate parts of the templates.views
? the standard page layout is formed from a few files in here (the project-specific files in client
extend this layout). You generally don't need to edit this much.dist
? the optimsed HTML/CSS/JS bundle, generated automatically every time you run npm run build
. You shouldn't edit files in here manually, as any manual changes would just get overwritten next time you build.Whenever you add any repository to the ft-interactive GitHub org, the IG Buildbot automatically sets up a new CircleCI project linked to the new repo. That means CircleCI will build the project whenever you add a new commit to that repo (whether on master or other branches).
How does Starter Kit come into this? Starter Kit includes a circle.yml
file that instructs CircleCI to run npm run deploy
after any successful builds. This means that all you have to do is commit a change to your project, and push the commit to GitHub (or just make the change directly on the GitHub website), and it should get deployed within a few minutes. (The deploy script automatically decides what path to upload files to, based on the name of the repo on GitHub.) This process is called continuous integration.
This software is published by the Financial Times under the MIT licence.