We're using Hapi as our framework for the npm website. We wrote all about why we chose Hapi in a blog post.
If you'd like to contribute to this project, please do!
Let's take a tour of the app.
The assets directory contains all the frontend stuff: JavaScript, stylesheets, images, fonts, robots.txt, favicon.ico, etc. The gulp process watches this directory for file changes, and outputs everything to the static directory, which is ignored by git to prevent automated version control noise.
- Browserify assets/scripts/index.js
- Concatenate non-browserify JavaScripts in assets/scripts/vendor
We're using Stylus, a CSS preprocessor with clean syntax and all the bells and whistles one would expect from a CSS preprocessor like variables, mixins, color manipulation functions, autoprefixing, etc. It's less of a hassle than Sass because it doesn't have C or Ruby dependencies.
assets/styles/index.styl is the master stylesheet, which is converted by the gulp process to static/styles/index.css.
For more information, see the style guide.
We're using Handlebars as our templating engine. Server-rendered templates live in templates. Frontend templates live in assets/templates. They are browserified into the bundled JS file using the hbsfy transform.
Handlebars partials are handy for markup that is needed in more than one place. All the partials are located in templates/partials. Every .hbs file in the partials directory becomes avaiable in all handlebars templates. For a good explanation of how to use partials, check out Passing variables through handlebars partial on Stack Overflow, or search for {{> in this codebase to see how we're using them.
A rudimentary localization effort is under way. The locales directory contains javascript files that export translations of various strings used throughout the app.
We use the blankie Hapi plugin to enforce a strict content security policy that disallows execution of unsafe Javascript. It's defined in csp.js.
Every route in the application is defined in routes.
Handlers (sometimes called controllers) are functions that accept two parameters: request and reply.
The request parameter is an object with details about the end user's request, such as path parameters, an associated payload, authentication information, headers, etc.
The second parameter, reply, is the method used to respond to the request.
Here's an example of a simple handler:
server.route({
method: 'GET',
path: '/',
handler: function (request, reply) {
reply('Hello!');
}
});The above handler is defined inline, but most of the handlers in this application are defined in their own file in the handlers directory.
We're using Lab as our testing utility and Code for assertions.
npm install
npm testIf you have npm 2.0.0 or greater installed (which you should), you can pass additional arguments to scripts. This handy feature allows for more granular control of the tests you want to run:
# a directory
npm test -- test/handlers
# a file
npm test -- test/models/user.jsWe're using semi-colons and comma-last. No rhyme or reason; just cuz.
It is not currently possible for non-employees to run the development server. This is being tracked at github.com/npm/newww/issues/761.
# run redis in a background process
redis-server&
# copy environment-based config/secrets
cp .env.example .env
# install deps
npm install
# run the hapi server
npm run devThe server should be running at localhost:15443.
If you have any trouble getting the site running locally, please open an issue and we'll help you figure it out.