browser-template

A template for starting front-end projects. Webpack for require system, build pipeline, and development server. Boostrap and Handlebars.js included. No front-end frameworks included.

Installation

1. Download this template.
2. Move to the wdi/projects directory, then unzip the template directory with unzip /Users/<user-name>/Downloads/browser-template-master.zip.
3. Rename the template directory from browser-template-master to <project-name>-client.
4. Empty README.md and fill with your own content.
5. Replace all instances of ga-wdi-boston.browser-template with the name of your project.
6. Move into the new project and git init.
7. Add all of the files in your project with the command git add --all.
   • Note: This is the only time you should run this command!
8. Commit all of your files with the command git commit.
   • Your commit title should read Initial commit.
9. Install dependencies with npm install.
10. Create a new repository on github.com, not GitHub Enterprise.
11. Name the new repository with the same name used on Step 3.
12. Follow the instructions on your new repository's setup page. For details on how to push to Github, refer to the section on Github entitled "…or push an existing repository from the command line." Further documentation can be found here.

Structure

Developers should store JavaScript files in assets/scripts. The "manifest" or entry-point is assets/scripts/app.js. In general, only application initialization goes in this file. It's normal for developers to start putting all code in this file, but encourage them to break out different responsibilities and use the require syntax put references where they're needed.

Developers should set apiUrls.production and apiUrls.development in assets/scripts/config.js. With apiUrls set, developers may rely on apiUrl as the base for API URLs.

Developers should store styles in assets/styles and load them from assets/styles/index.scss. Bootstrap version 3 is included in this template.

Developers should use getFormFields to retrieve form data to send to an API.

To deploy a browser-template based SPA, run grunt deploy.

Adding Images

To add images to your project, you must store them in the public directory. To use the image in HTML or CSS, write the path to the image like this:

<img src="public/cat.jpg">

or

#my-cool-div {
  background-image: url('public/cat.jpg')
}

Note that there's no ./ or / in front of public/filename.jpg.

Adding Fonts

To add custom fonts to your app, you can either use a CDN like Google Fonts, or you can download the fonts and save them in the public directory. If you use the former method, follow the directions on the website providing the fonts.

For local fonts, put the files in public, and then import and use them in a .scss file like this:

@font-face {
  font-family: 'Nature Beauty';
  src: url('public/Nature-Beauty.ttf') format('truetype');
}

.element-with-custom-font {
  font-family: 'Nature Beauty';
}

Tasks

Developers should run these often!

• grunt nag or just grunt: runs code quality analysis tools on your code and complains
• grunt make-standard: reformats all your code in the JavaScript Standard Style
• grunt <server|serve|s>: generates bundles, watches, and livereloads
• grunt build: place bundled styles and scripts where index.html can find them

Additional Resources

• Modern Javascript Explained for Dinosaurs
• Making Sense of Front End Build Tools

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].