Help Scout Prototypes
|
Quickstart
Clone this repository and build on what is included in the app
directory.
Be sure to look over the installation docs to verify your environment is prepared to run this. Once you have verified that your system can run it, check out the commands available to get started.
Prerequisites
Node.js
Bring up a terminal and type node --version
.
Node should respond with a version at or above 0.10.x.
If you require Node, go to nodejs.org and click on the big green Install button.
Gulp
Bring up a terminal and type gulp --version
.
If Gulp is installed it should return a version number at or above 3.9.x.
If you need to install/upgrade Gulp, open up a terminal and type in the following:
$ npm install --global gulp
This will install Gulp globally. Depending on your user account, you may need to configure your system to install packages globally without administrative privileges.
Local dependencies
Next, install the local dependencies requires:
$ npm install
Note: if you have the Yarn package manager installed, you can just run yarn
.
That's it!
There are many commands available to help you build and test sites. Here are a few highlights to get started with.
Commands
Watch For Changes & Automatically Refresh Across Devices
$ gulp serve
This outputs an IP address you can use to locally test and another that can be used on devices
connected to your network.
serve
does not use service worker
caching, so your site will stop being available when the web server stops running.
Build & Optimize
$ gulp
Build and optimize the current project, ready for deployment. This includes linting as well as image, script, stylesheet and HTML optimization and minification. Also, a service worker script will be automatically generated, which will take care of precaching your sites' resources. On browsers that support service workers, the site will be loaded directly from the service worker cache, bypassing the server. This means that this version of the site will work when the server isn't running or when there is no network connectivity.
Serve the Fully Built & Optimized Site
$ gulp serve:dist
This outputs an IP address you can use to locally test and another that can be used on devices
connected to your network.
serve:dist
includes will serve a local copy of the built and optimized site generated as part
of the default
task.
Because the optimized site includes a service worker which serves your site directly from the
cache, you will need to reload the page after regenerating the site to pick up the latest changes.
serve:dist
uses a different HTTP port than serve
, which means that the service workers are
kept isolated in different scopes.
serve
& serve:dist
Difference Between It is important to note a difference between the serve
and serve:dist
tasks.
serve
uses a no-opservice-worker.js
and cannot run offline.serve:dist
uses thesw-precache
-generated output and can run offline.
The serve
task runs on port 3000 and serve:dist
runs on port 3001.
The main purpose is to ensure that different service workers will not impact each other's environment.
Using the sw-precache
-generated output makes it very difficult to quickly test local changes which is not ideal for a development server environment.
Performance Insights
$ gulp pagespeed
Runs the deployed (public) version of your site against the PageSpeed Insights API to help you stay on top of where you can improve.