A music player application template.
Start by cloning the repository
$ git clone
The project uses Grunt to run tasks in development.It may also help to review [our resource on NPM and package.json
files].
Install the project dependencies by running:
$ npm install
Run the application using the Gruntfile's default
task:
$ grunt
The default task runs a simple server on port 3000. To view it in a any browser, go to http://localhost:3000.
Note that unless the application is run via Live Preview in Brackets, the browser will need to be refreshed to view the most recent changes.
By default, the application is configured to be used in a Single-Page Application (SPA) with AngularJS. If you're working on a project that doesn't use AngularJS, see the instructions below for configuring the server to run in a non-SPA.
All code, styles, markup, and assets should be saved to the app
directory. Saving changes creates a new directory, dist
, that holds final copies of the application content. dist
is the directory the server uses to serve the content displayed by the browser. Do not edit files in dist
because it will reset changes to your work every time you save. Restrict all edits to files in the app
directory.
Add images to the app/assets/images
directory. To reference images in HTML, use the path /assets/images/<image file name>.jpg
. For example, to include the image called white-logo.png
, the path for the src
attribute in the HTML would be:
Note: A sample image has been added to app/images
. To remove the image from the application, run the following command from the root of repo:
To reference any other assets, like the music in the template, use the path assets/<asset-type>/<asset-file>
. The Gruntfile is pre-configured to handle assets in a subfolder with the .mp3
extension.
See lines 14 and 35 of
Gruntfile.js
for the accepted file extensions of assets.
The templates
directory should hold any HTML files used as templates in Angular states configured by UI Router. All other HTML files belong in the pages
directory.
The Procfile
is a file for providing instructions to Heroku servers that run after pushing new code to the repository. Do not change the contents of the Procfile or Heroku will throw an error when you attempt to visit your application.
By default, the template is configured to be used with SPAs. If you're not building a project with Angular, then modify server.js
with the following:
var Hapi = require('hapi'),
path = require('path'),
port = process.env.PORT || 3000,
server = new Hapi.Server(port),
routes = {
css: {
method: 'GET',
path: '/styles/{path*}',
handler: createDirectoryRoute('styles')
},
js: {
method: 'GET',
path: '/scripts/{path*}',
handler: createDirectoryRoute('scripts')
},
assets: {
method: 'GET',
path: '/assets/{path*}',
handler: createDirectoryRoute('assets')
},
templates: {
method: 'GET',
path: '/templates/{path*}',
handler: createDirectoryRoute('templates')
},
- spa: {
+ staticPages: {
method: 'GET',
path: '/{path*}',
- handler: {
- file: path.join(__dirname, '/dist/index.html')
- }
+ handler: createDirectoryRoute('/')
}
};
-server.route([ routes.css, routes.js, routes.images, routes.templates, routes.spa ]);
+server.route([ routes.css, routes.js, routes.images, routes.templates, routes.staticPages ]);
...
Optionally, delete the templates
directory and all references to it in Gruntfile.js
to remove unnecessary files (templates are only useful for SPAs). However, keeping them in the repository won't affect your application.
A list of the Grunt plugins in this application.
Grunt watch watches for changes to file content and then executes Grunt tasks when a change is detected.
Grunt copy copies files from our development folders and puts them in the folder that will be served with the frontend of your application.
Grunt clean "cleans" or removes all files in your distribution folder (dist
) so that logic in your stylesheets, templates, or scripts isn't accidentally overridden by previous code in the directory.
Grunt Hapi runs a server using HapiJS
. Happy is a Node web application framework with robust configuration options.