Pup

v1.x

File Structure

Pup follows a slightly modified version of the official, Meteor Guide application structure. Below is an explanation of the directories included and their purpose.

.meteor

.meteor contains the core application files for running the application. These are managed by Meteor and should not be modified directly.

client

client stores two files for setting up the client-side of Pup: main.html and main.js. The first defines the basic markup for the application—as well as a place to render React components—and the second imports the contents of the client startup file located at /imports/startup/client/index.js. Any files stored in this directory are automatically loaded on client startup.

imports

imports is the Grand Poobah of Pup. It stores all of the files that we do not want Meteor to load automatically. Instead, it contains files that we want to load manually, using ES2015/ES6 import statements. Even though the files in this directory require a manual import, Meteor's directory rules still apply (e.g., files inside of /import that are nested in /server directories will be respected by Meteor upon import).

imports/api

imports/api contains definitions for data in your application. Inside of /api, directories are created for each "topic" or "scope." For example, the imports/api/Documents directory contains all of the data-related files for the Documents MongoDB collection.

imports/modules

imports/modules contains miscellaneous JavaScript modules in your application. These modules contain reusable code that you can repurpose throughout your application (e.g., the modules/parse-markdown.js file can be reused throughout the application to parse Markdown). Note: the /imports/modules directory contains a nested /server directory that stores modules intended only for use on the server. If the files in this directory are imported within a client context, Meteor will throw an error.

The imports/modules directory also contains a nested redux folder which contains two files to aid in Pup's server-side rendering of pages.

imports/startup

imports/startup contains three directories containing files to load on startup of either the client, server, or both environments in Meteor. The imports/startup/client directory contains an index.js file which imports all of its sibling files and is ultimately loaded on the client in /client/main.js (the import there assumes the index.js file, so it's omitted from the import's path). The imports/startup/server directory contains an index.js file which imports all of its sibling files and is ultimately loaded on the server in /server/main.js (the import there assumes the index.js file, so it's omitted from the import's path). The /imports/startup/both directory contains an api.js file and is loaded within the index.js file under both /imports/startup/client and /imports/startup/server.

imports/ui

imports/ui contains all of the user interface related code for your application. It's split into three directories: components, layouts, and pages. To learn more about these directories, read Pup's documentation on components here.

node_modules

node_modules contains all of the NPM packages that have been installed in your application. Note: when you run npm install <package-name> it will appear in this directory, but not be made a permanent dependency for your application. If you want an NPM package to be installed in production as well as locally, make sure to run npm install --save <package-name>. The --save flag tells NPM to add the dependency to your package.json file.

private

private contains static files that should only be made accessible to the server. In Pup, this directory contains one additional directory, email-templates, which contains .html and .txt templates for use with Pup's transactional email feature.

public

public contains files that are intended to be visible to the public. These files are loaded automatically by Meteor into the root path of your running application (i.e., the public/favicon.png file is accessible at http://localhost:3000/favicon.png in your application).

server

server contains a single file, main.js which is loaded on Meteor's server startup. That file includes an import for /imports/startup/server/index.js which itself imports all of the files we want to be loaded on Meteor's server startup.

.babelrc

A configuration file for Babel, the JavaScript transpiler used by Meteor. This is included in Pup so that we can make use of the babel-plugin-lodash package from NPM which helps to reduce the load of the lodash package by omitting unused functionality when building the app.

.gitattributes

For Windows users. Added to allow for customization of line ending style to LF (line feed) inside of .js files on commits and checkouts. Without this, ESLint on Windows throws an error.

.gitignore

.gitignore is a file used to tell Git which files it should not commit to version control. In other words, any files or directories listed in this file will not be saved to your project's Git repository or your remote Git host (e.g., GitHub) when you push changes.

History.md

Pup's changelog. This contains a list of previous releases by date along with a v.NEXT block which outlines items that will be released in upcoming versions of Pup.

package-lock.json

A file automatically generated by NPM. This keeps a full history of changes to the node_modules directory and the package.json file over the life of the project. This is mostly intended to ensure installations of packages are consistent across all developers who access the project.

package.json

package.json is a file that details your project, its dependencies, and any configuration for your application. The package.json file is a convention of the NPM package repository and is designed to give a technical description of how any Node.js based package—or application—should behave and what packages it depends on. In Pup, the package.json file stores information about all of the application's NPM dependencies, as well as scripts for automating common commands and defining exceptions for ESLint linting rules.

README.md

Placeholder file describing the repository with a link to this documentation site.

settings-development.json

settings-development.json is a file used for storing your development environment settings. This file follows the settings.json convention. Note: this file is only intended to store settings for your development environment.

settings-staging.json

settings-staging.json (assumed, not included in the project) is a file used for storing your staging environment settings. This file follows the settings.json convention. Note: this file is only intended to store settings for your staging environment.

settings-production.json

settings-production.json (assumed, not included in the project) is a file used for storing your production environment settings. This file follows the settings.json convention. Note: this file is only intended to store settings for your staging environment.

File Structure Diagram
.meteor
client
-- main.html
-- main.js
imports
-- api
---- Documents
------ server
-------- indexes.js
-------- publications.js
------ Documents.js
------ methods.js
---- OAuth
------ server
-------- methods.js
---- Users
------ server
-------- delete-account.js
-------- edit-profile.js
-------- export-data.js
-------- methods.js
-------- publications.js
-------- send-welcome-email.js
-- modules
---- redux
------ actions.js
------ reducers.js
---- server
------ create-index.js
------ get-private-file.js
------ handlebars-email-to-html.js
------ handlebars-email-to-text.js
------ send-email.js
---- dates.js
---- get-oauth-profile.js
---- handle-method-exception.js
---- parse-markdown.js
---- parse-url-for-ssr.js
---- rate-limit.js
---- validate.js
-- startup
---- both
------ api.js
---- client
------ index.js
---- server
------ accounts
-------- email-templates.js
-------- index.js
-------- oauth.js
-------- on-create-user.js
------ api.js
------ email.js
------ fixtures.js
------ index.js
------ ssr.js
-- ui
---- components
------ AccountPageFooter
-------- AccountPageFooter.js
------ Authenticated
-------- Authenticated.js
------ AuthenticatedNavigation
-------- AuthenticatedNavigation.js 
------ DocumentEditor
-------- DocumentEditor.js
------ Footer
-------- Footer.js
------ Icon
-------- Icon.js
------ InputHint
-------- InputHint.js
------- Loading
--------- Loading.js
------- Navigation
--------- Navigation.js
------- OAuthLoginButton
--------- OAuthLoginButton.js
------- OAuthLoginButtons
--------- OAuthLoginButtons.js
------- PageHeader
--------- PageHeader.js
------- Public
--------- Public.js
------- PublicNavigation
--------- PublicNavigation.js
------- VerifyEmailAlert
--------- VerifyEmailAlert.js
---- layouts
------ App
-------- App.js
---- pages
------- Documents
--------- Documents.js
------- EditDocument
--------- EditDocument.js
------- ExamplePage
--------- ExamplePage.js
------- Index
--------- Index.js
------- Login
--------- Login.js
------- Logout
--------- Logout.js
------- NewDocument
--------- NewDocument.js
------- NotFound
--------- NotFound.js
------- Page
--------- Page.js
------- Privacy
--------- Privacy.js
------- Profile
--------- Profile.js
------- RecoverPassword
--------- RecoverPassword.js
------- ResetPassword
--------- ResetPassword.js
------- Signup
--------- Signup.js
------- Terms
--------- Terms.js
------- VerifyEmail
--------- VerifyEmail.js
------- ViewDocument
--------- ViewDocument.js
node_modules
private
-- email-templates
---- base.html
---- reset-password.html
---- reset-password.txt
---- verify-email.html
---- verify-email.txt
---- welcome.html
---- welcome.txt
public
-- apple-touch-icon-precomposed.png
-- facebook.svg
-- favicon.png
-- github.svg
-- google.svg
server
-- main.js
.babelrc
.gitattributes
.gitignore
History.md
package-lock.json
package.json
README.md
settings-development.json
settings-production.json (assumed, but not included)
settings-staging.json (assumed, but not included)