Repository files navigation

# Run databaseyarnyarn startDb# Now, open another terminal and typeyarn start

Hackathon Starter - example with CodeAlly

=======================

Live Demo:https://hackathon-starter.walcony.com

Jump toWhat's new?

A boilerplate forNode.js web applications.

If you have attended any hackathons in the past, then you know how much time it takes toget a project started: decide on what to build, pick a programming language, pick a web framework,pick a CSS framework. A while later, you might have an initial project up on GitHub and only thencan other team members start contributing. Or how about doing something as simple asSign in with Facebookauthentication? You can spend hours on it if you are not familiar with how OAuth 2.0 works.

When I started this project, my primary focus was onsimplicity andease of use.I also tried to make it asgeneric andreusable as possible to cover most use cases of hackathon web apps,without being too specific. In the worst case, you can use this as a learning guide for your projects,if for example you are only interested inSign in with Google authentication and nothing else.

“Nice! That README alone is already gold!”
— Adrian Le Bas

“Awesome. Simply awesome.”
— Steven Rueter

“I'm using it for a year now and many projects, it's an awesome boilerplate and the project is well maintained!”
— Kevin Granger

“Small world with Sahat's project. We were using his hackathon starter for our hackathon this past weekend and got some prizes. Really handy repo!”
— Interview candidate for one of the companies I used to work with.

• Features
• Prerequisites
• Getting Started
• Obtaining API Keys
• Project Structure
• List of Packages
• Useful Tools and Resources
• Recommended Design Resources
• Recommended Node.js Libraries
• Recommended Client-side Libraries
• Pro Tips
• FAQ
• How It Works
• Cheatsheets
  • ES6
  • JavaScript Date
  • Mongoose Cheatsheet
• Deployment
• Docker
• Production
• Changelog
• Contributing
• License

• Local Authentication using Email and Password
• OAuth 1.0a Authentication via Twitter
• OAuth 2.0 Authentication via Facebook, Google, GitHub, LinkedIn, Instagram
• Flash notifications
• MVC Project Structure
• Node.js clusters support
• Sass stylesheets (auto-compiled via middleware)
• Bootstrap 4 + Extra Themes
• Contact Form (powered by Mailgun, Sendgrid or Mandrill)
• Account Management
• Gravatar
• Profile Details
• Change Password
• Forgot Password
• Reset Password
• Link multiple OAuth strategies to one account
• Delete Account
• CSRF protection
• API Examples: Facebook, Foursquare, Last.fm, Tumblr, Twitter, Stripe, LinkedIn and more.

• MongoDB
• Node.js 8.0+
• Command Line Tools
•  Mac OS X:Xcode (orOS X 10.9+:xcode-select --install)
•  Windows:Visual Studio ORVisual Studio Code +Windows Subsystem for Linux - Ubuntu
•  Ubuntu / Linux Mint:sudo apt-get install build-essential
•  Fedora:sudo dnf groupinstall "Development Tools"
•  OpenSUSE:sudo zypper install --type pattern devel_basis

Note: If you are new to Node or Express, you may findNode.js & Express From Scratch serieshelpful for learning the basics of Node and Express. Alternatively,here is another great tutorial for complete beginners -Getting Started With Node.js, Express, MongoDB.

The easiest way to get started is to clone the repository:

# Get the latest snapshotgit clone https://github.com/sahat/hackathon-starter.git myproject# Change directorycd myproject# Install NPM dependenciesnpm install# Then simply start your appnode app.js

Warning: If you want to use some API that need https to work (for example Pinterest or facebook),you will need to downloadngrok.You must start ngrok after starting the project.

# start ngrok to intercept the data exchanged on port 8080./ngrok http 8080

Next, you must use the https URL defined by ngrok, for example,https://hackaton.ngrok.io

Note: I highly recommend installingNodemon.It watches for any changes in your node.js app and automatically restarts theserver. Once installed, instead ofnode app.js usenodemon app.js. It willsave you a lot of time in the long run, because you won't need to manuallyrestart the server each time you make a small change in code. To install, runsudo npm install -g nodemon.

To use any of the included APIs or OAuth authentication methods, you will needto obtain appropriate credentials: Client ID, Client Secret, API Key, orUsername & Password. You will need to go through each provider to generate newcredentials.

• VisitGoogle Cloud Console
• Click on theCreate Project button
• EnterProject Name, then click onCreate button
• Then click onAPIs & auth in the sidebar and selectAPI tab
• Click onGoogle+ API underSocial APIs, then clickEnable API
• Click onGoogle Drive API underG Suite, then clickEnable API
• Click onGoogle Sheets API underG Suite, then clickEnable API
• Next, underAPIs & auth in the sidebar click onCredentials tab
• Click onCreate new Client ID button
• SelectWeb Application and click onConfigure Consent Screen
• Fill out the required fields then click onSave
• In theCreate Client ID modal dialog:
• Application Type: Web Application
• Authorized Javascript origins:http://localhost:8080
• Authorized redirect URI:http://localhost:8080/auth/google/callback
• Click onCreate Client ID button
• Copy and pasteClient ID andClient secret keys into.env

Note: When you ready to deploy to production don't forget toadd your new URL toAuthorized Javascript origins andAuthorized redirect URI,e.g.http://my-awesome-app.herokuapp.com andhttp://my-awesome-app.herokuapp.com/auth/google/callback respectively.The same goes for other providers.

• VisitSnap Kit Developer Portal
• Click on the+ button to create an app
• Enter a name for your app
• Enable the scopes that you will want to use in your app
• Click on theContinue button
• Find theKits section and make sure thatLogin Kit is enabled
• Find theRedirect URLs section, click the+ Add button, and enterhttp://localhost:8080/auth/snapchat/callback
• Find theDevelopment Environment section. Click theGenerate button next to theConfidential OAuth2 Client heading within it.
• Copy and paste the generatedPrivate Key andOAuth2 Client ID keys into.env
• Note:OAuth2 Client ID isSNAPCHAT_ID,Private Key isSNAPCHAT_SECRET in.env
• To prepare the app for submission, fill out the rest of the required fields:Category,Description,Privacy Policy Url, andApp Icon

Note: For production use, don't forget to:

• generate aConfidential OAuth2 Client in theProduction Environment and use the productionPrivate Key andOAuth2 Client ID
• add the production URL toRedirect URLs section, e.g.http://my-awesome-app.herokuapp.com/auth/snapchat/callback
• submit the app for review and wait for approval

• VisitFacebook Developers
• ClickMy Apps, then select *Add a New App from the dropdown menu
• Enter a new name for your app
• Click on theCreate App ID button
• Find the Facebook Login Product and click onFacebook Login
• Instead of going through their Quickstart, click onSettings for your app in the top left corner
• Copy and pasteApp ID andApp Secret keys into.env
• Note:App ID isFACEBOOK_ID,App Secret isFACEBOOK_SECRET in.env
• Enterlocalhost underApp Domains
• Choose aCategory that best describes your app
• Click on+ Add Platform and selectWebsite
• Enterhttp://localhost:8080 underSite URL
• Click on theSettings tab in the left nav under Facebook Login
• Enterhttp://localhost:8080/auth/facebook/callback under Valid OAuth redirect URIs

Note: After a successful sign in with Facebook, a user will be redirected back to the home page with appended hash#_=_ in the URL. It isnot a bug. See thisStack Overflow discussion for ways to handle it.

• Go toAccount Settings
• SelectDeveloper settings from the sidebar
• Then click onOAuth Apps and then onRegister new application
• EnterApplication Name andHomepage URL
• ForAuthorization Callback URL:http://localhost:8080/auth/github/callback
• ClickRegister application
• Now copy and pasteClient ID andClient Secret keys into.env file

• Sign in athttps://apps.twitter.com
• ClickCreate a new application
• Enter your application name, website and description
• ForCallback URL:http://127.0.0.1:8080/auth/twitter/callback
• Go toSettings tab
• UnderApplication Type selectRead and Write access
• Check the boxAllow this application to be used to Sign in with Twitter
• ClickUpdate this Twitter's applications settings
• Copy and pasteConsumer Key andConsumer Secret keys into.env file

• Sign in atLinkedIn Developer Network
• From the account name dropdown menu selectAPI Keys
• It may ask you to sign in once again
• Click+ Add New Application button
• Fill out all therequired fields
• OAuth 2.0 Redirect URLs:http://localhost:8080/auth/linkedin/callback
• JavaScript API Domains:http://localhost:8080
• ForDefault Application Permissions make sure at least the following is checked:
• r_basicprofile
• Finish by clickingAdd Application button
• Copy and pasteAPI Key andSecret Key keys into.env file
• API Key is yourclientID
• Secret Key is yourclientSecret

• Sign up or log into yourdashboard
• Click on your profile and click on Account Settings
• Then click onAPI Keys
• Copy theSecret Key. and add this into.env file

• VisitPayPal Developer
• Log in to your PayPal account
• ClickApplications > Create App in the navigation bar
• EnterApplication Name, then clickCreate app
• Copy and pasteClient ID andSecret keys into.env file
• App ID isclient_id,App Secret isclient_secret
• Changehost to api.paypal.com if you want to test against production and use the live credentials

• Go toFoursquare for Developers
• Click onMy Apps in the top menu
• Click theCreate A New App button
• EnterApp Name,Welcome page url,
• ForRedirect URI:http://localhost:8080/auth/foursquare/callback
• ClickSave Changes
• Copy and pasteClient ID andClient Secret keys into.env file

• Go tohttp://www.tumblr.com/oauth/apps
• Once signed in, click+Register application
• Fill in all the details
• ForDefault Callback URL:http://localhost:8080/auth/tumblr/callback
• Click✔Register
• Copy and pasteOAuth consumer key andOAuth consumer secret keys into.env file

• Go tohttp://steamcommunity.com/dev/apikey
• Sign in with your existing Steam account
• Enter yourDomain Name, then and clickRegister
• Copy and pasteKey into.env file

• Go tohttps://sendgrid.com/user/signup
• Sign up andconfirm your account via theactivation email
• Then enter your SendGridUsername andPassword into.env file

• Go tohttp://www.mailgun.com
• Sign up and add yourDomain Name
• From the domain overview, copy and paste the default SMTPLogin andPassword into.env file

• Go tohttps://developer.here.com
• Sign up and create a Freemium project
• Create JAVASCRIPT/REST credentials. Copy and paste the APP_ID and APP into.env file.
• Note that these credentials are available on the client side, and you need to create a domain whitelist for your app credentials when you are publicly launching the app.

• Go tohttps://www.twilio.com/try-twilio
• Sign up for an account.
• Once logged into the dashboard, expand the link 'show api credentials'
• Copy your Account Sid and Auth Token

• Go tohttps://developer.intuit.com/app/developer/qbo/docs/get-started
• Use the Sign Up option in the upper right corner of the screen (nav bar) to get a free developer account and a sandbox company.
• Create a new app by going to your Dashboard using the My Apps option in the top nav bar or by going tohttps://developer.intuit.com/app/developer/myapps
• In your App, under Development, Keys & OAuth (right nav), find the Client ID and Client Secret for your.env file

Note: There is no preference how you name or structure your views.You could place all your templates in a top-levelviews directory withouthaving a nested folder structure, if that makes things easier for you.Just don't forget to updateextends ../layout and correspondingres.render() paths in controllers.

• JavaScripting - The Database of JavaScript Libraries
• JS Recipes - JavaScript tutorials for backend and frontend development.
• HTML to Pug converter - HTML to PUG is a free online converter helping you to convert HTML files to pug syntax in real-time.
• JavascriptOO - A directory of JavaScript libraries with examples, CDN links, statistics, and videos.
• Favicon Generator - Generate favicons for PC, Android, iOS, Windows 8.

• Code Guide - Standards for developing flexible, durable, and sustainable HTML and CSS.
• Bootsnipp - Code snippets for Bootstrap.
• Bootstrap Zero - Free Bootstrap templates themes.
• Google Bootstrap - Google-styled theme for Bootstrap.
• Font Awesome Icons - It's already part of the Hackathon Starter, so use this page as a reference.
• Colors - A nicer color palette for the web.
• Creative Button Styles - awesome button styles.
• Creative Link Effects - Beautiful link effects in CSS.
• Medium Scroll Effect - Fade in/out header background image as you scroll.
• GeoPattern - SVG background pattern generator.
• Trianglify - SVG low-poly background pattern generator.

• Nodemon - Automatically restart Node.js server on code changes.
• geoip-lite - Geolocation coordinates from IP address.
• Filesize.js - Pretty file sizes, e.g.filesize(265318); // "265.32 kB".
• Numeral.js - Library for formatting and manipulating numbers.
• Node Inspector - Node.js debugger based on Chrome Developer Tools.
• node-taglib - Library for reading the meta-data of several popular audio formats.
• sharp - Node.js module for resizing JPEG, PNG, WebP and TIFF images.

• Framework7 - Full Featured HTML Framework For Building iOS7 Apps.
• InstantClick - Makes your pages load instantly by pre-loading them on mouse hover.
• NProgress.js - Slim progress bars like on YouTube and Medium.
• Hover - Awesome CSS3 animations on mouse hover.
• Magnific Popup - Responsive jQuery Lightbox Plugin.
• jQuery Raty - Star Rating Plugin.
• Headroom.js - Hide your header until you need it.
• X-editable - Edit form elements inline.
• Offline.js - Detect when user's internet connection goes offline.
• Alertify.js - Sweet looking alerts and browser dialogs.
• selectize.js - Styleable select elements and input tags.
• drop.js - Powerful Javascript and CSS library for creating dropdowns and other floating displays.
• scrollReveal.js - Declarative on-scroll reveal animations.

• Useasync.parallel() when you need to run multipleasynchronous tasks, and then render a page, but only when all tasks are completed. For example, you might want to scrape three different websites for some data and render the results in a template after all three websites have been scraped.
• Need to find a specific object inside an Array? Use_.findfunction from Lodash. For example, this is how you would retrieve aTwitter token from database:var token = _.find(req.user.tokens, { kind: 'twitter' });,where 1st parameter is an array, and a 2nd parameter is an object to search for.

You need to add the following hidden input element to your form. This has beenadded in thepull request #40as part of the CSRF protection.

input(type='hidden', name='_csrf', value=_csrf)

Note: It is now possible to whitelist certain URLs. In other words you canspecify a list of routes that should bypass CSRF verification check.

Note 2: To whitelist dynamic URLs use regular expression tests inside theCSRF middleware to see ifreq.originalUrl matches your desired pattern.

That's a custom error message defined inapp.js to indicate that there was aproblem connecting to MongoDB:

mongoose.connection.on('error',(err)=>{console.error(err);console.log('%s MongoDB connection error. Please make sure MongoDB is running.',chalk.red('✗'));process.exit();});

You need to have a MongoDB server running before launchingapp.js. You candownload MongoDBhere, or install it via a package manager.Windows users, readInstall MongoDB on Windows.

Tip: If you are always connected to the internet, you could just useMongoDB Atlas orCompose insteadof downloading and installing MongoDB locally. You will only need to update database credentialsin.env file.

Chances are you haven't changed theDatabase URI in.env. IfMONGODB isset tolocalhost, it will only work on your machine as long as MongoDB isrunning. When you deploy to Heroku, OpenShift or some other provider, you will not have MongoDBrunning onlocalhost. You need to create an account withMongoDB AtlasorCompose, then create a free tier database.SeeDeployment for more information on how to setup an accountand a new database step-by-step with MongoDB Atlas.

When I first started this project I didn't have any experience with Handlebars. Since then I have worked on Ember.js apps and got myself familiar with the Handlebars syntax. While it is true Handlebars is easier, because it looks like good old HTML, I have no regrets picking Jade over Handlebars. First off, it's the default template engine in Express, so someone who has built Express apps in the past already knows it. Secondly, I findextends andblock to be indispensable, which as far as I know, Handlebars does not have out of the box. And lastly, subjectively speaking, Jade looks much cleaner and shorter than Handlebars, or any non-HAML style for that matter.

For the sake of simplicity. While there might be a better approach,such as passingapp context to each controller as outlined in thisblog,I find such style to be confusing for beginners.It took me a long time to grasp the concept ofexports andmodule.exports,let alone having a globalapp reference in other files.That to me is backward thinking.Theapp.js is the "heart of the app", it should be the one referencingmodels, routes, controllers, etc.When working solo on small projects, I prefer to have everything insideapp.js as is the case with thisREST API server.

Inside thenodemailer.createTransport method arguments, change the service from'Sendgrid' to some other email service. Also, be sure to update both username and password below that. See thelist of all supported services by Nodemailer.

This section is intended for giving you a detailed explanation ofhow a particular functionality works. Maybe you are just curious abouthow it works, or perhaps you are lost and confused while reading the code,I hope it provides some guidance to you.

HTML5 UP has many beautiful templates that you can download for free.

When you download the ZIP file, it will come withindex.html,images,css andjs folders. So, how do youintegrate it with Hackathon Starter? Hackathon Starter uses Bootstrap CSS framework, but these templates do not.Trying to use both CSS files at the same time will likely result in undesired effects.

Note: Using the custom templates approach, you should understand that you cannot reuse any of the views I have created: layout, home page, api browser, login, signup, account management, contact. Those views were built using Bootstrap grid and styles. You will have to manually update the grid using a different syntax provided in the template.Having said that, you can mix and match if you want to do so: Use Bootstrap for main app interface, and a custom template for a landing page.

Let's start from the beginning. For this example I will useEscape Velocity template:

Note: For the sake of simplicity I will only considerindex.html, and skipleft-sidebar.html,no-sidebar.html,right-sidebar.html.

Move all JavaScript files fromhtml5up-escape-velocity/js topublic/js. Then move all CSS files fromhtml5up-escape-velocity/css topublic/css. And finally, move all images fromhtml5up-escape-velocity/images topublic/images. You could move it to the existingimg folder, but that would require manually changing everyimg reference. Grab the contents ofindex.html and paste it intoHTML To Pug.

Note: Do not forget to update all the CSS and JS paths accordingly.

Create a new fileescape-velocity.pug and paste the Pug markup inviews folder.Whenever you see the coderes.render('account/login') - that means it will search forviews/account/login.pug file.

Let's see how it looks. Create a new controllerescapeVelocity insidecontrollers/home.js:

exports.escapeVelocity=(req,res)=>{res.render('escape-velocity',{title:'Landing Page'});};

And then create a route inapp.js. I placed it right after the index controller:

app.get('/escape-velocity',homeController.escapeVelocity);

Restart the server (if you are not usingnodemon); then you should see the new template athttp://localhost:8080/escape-velocity.

I will stop right here, but if you would like to use this template as more than just a single page, take a look at how these Pug templates work:layout.pug - base template,index.pug - home page,partials/header.pug - Bootstrap navbar,partials/footer.pug - sticky footer. You will have to manually break it apart into smaller pieces. Figure out which part of the template you want to keep the same on all pages - that's your newlayout.pug.Then, each page that changes, be itindex.pug,about.pug,contact.pugwill be embedded in your newlayout.pug viablock content. Use existing templates as a reference.

This is a rather lengthy process, and templates you get from elsewhere might have yet another grid system. That's why I choseBootstrap for the Hackathon Starter.Many people are already familiar withBootstrap, plus it's easy to get started with it if you have never usedBootstrap.You can also buy many beautifully designedBootstrap themes atThemeforest, and use them as a drop-in replacement for Hackathon Starter. However, if you would like to go with a completely custom HTML/CSS design, this should help you to get started!

Flash messages allow you to display a message at the end of the request and accessit on next request and only next request. For instance, on a failed login attempt, you woulddisplay an alert with some error message, but as soon as you refresh that page or visit a differentpage and come back to the login page, that error message will be gone. It is only displayed once.This project usesexpress-flash module for flash messages. And thatmodule is built on top ofconnect-flash, which is what I used inthis project initially. Withexpress-flash you don't have toexplicitly send a flash message to every view insideres.render().All flash messages are available in your views viamessages object by default,thanks toexpress-flash.

Flash messages have a two-step process. You usereq.flash('errors', { msg: 'Error messages goes here' }to create a flash message in your controllers, and then display them in your views:

ifmessages.errors.alert.alert-danger.fade.infor errorinmessages.errors      div=error.msg

In the first step,'errors' is the name of a flash message, which should match thename of the property onmessages object in your views. You place alert messagesinsideif message.errors because you don't want to show them flash messages are present.The reason why you pass an error like{ msg: 'Error message goes here' } insteadof just a string -'Error message goes here', is for the sake of consistency.To clarify that,express-validator module which is used for validating and sanitizing user's input,returns all errors as an array of objects, where each object has amsg property with a message why an error has occurred. Here is a more general example of what express-validator returns when there are errors present:

[{param:"name",msg:"Name is required",value:"<received input>"},{param:"email",msg:"A valid email is required",value:"<received input>"}]

To keep consistent with that style, you should pass all flash messagesas{ msg: 'My flash message' } instead of a string. Otherwise, you will see an alert boxwithout an error message. That is because inpartials/flash.pug template it will try to outputerror.msg (i.e."My flash message".msg), in other words, it will try to call amsg method on aString object,which will returnundefined. Everything I just mentioned about errors, also appliesto "info" and "success" flash messages, and you could even create a new one yourself, such as:

Data Usage Controller (Example)

req.flash('warning', { msg: 'You have exceeded 90% of your data usage' });

User Account Page (Example)

ifmessages.warning.alert.alert-warning.fade.infor warninginmessages.warning      div=warning.msg

partials/flash.pug is a partial template that contains how flash messagesare formatted. Previously, flashmessages were scattered throughout each view that used flash messages(contact, login, signup, profile), but now, thankfully it uses aDRY approach.

The flash messages partial template isincluded in thelayout.pug, along with footer and navigation.

bodyincludepartials/header.containerincludepartials/flashblockcontentincludepartials/footer

If you have any further questions about flash messages,please feel free to open an issue, and I will update this mini-guide accordingly,or send a pull request if you would like to include something that I missed.

A more correct way to say this would be "How do I create a new route?" The main fileapp.js contains all the routes.Each route has a callback function associated with it. Sometimes you will see three or more arguments for a route. In a case like that, the first argument is still a URL string, while middle argumentsare what's called middleware. Think of middleware as a door. If this door prevents you fromcontinuing forward, you won't get to your callback function. One such example is a route that requires authentication.

app.get('/account',passportConfig.isAuthenticated,userController.getAccount);

It always goes from left to right. A user visits/account page. ThenisAuthenticated middleware checks if you are authenticated:

exports.isAuthenticated=(req,res,next)=>{if(req.isAuthenticated()){returnnext();}res.redirect('/login');};

If you are authenticated, you let this visitor pass through your "door" by callingreturn next();. It then proceeds to thenext middleware until it reaches the last argument, which is a callback function that typically renders a template onGET requests or redirects onPOST requests. In this case, if you are authenticated, you will be redirected to theAccount Management page; otherwise, you will be redirected to theLogin page.

exports.getAccount=(req,res)=>{res.render('account/profile',{title:'Account Management'});};

Express.js hasapp.get,app.post,app.put,app.delete, but for the most part, you will only use the first two HTTP verbs, unless you are building a RESTful API.If you just want to display a page, then useGET, if you are submitting a form, sending a file then usePOST.

Here is a typical workflow for adding new routes to your application. Let's say we are building a page that lists all books from the database.

Step 1. Start by defining a route.

app.get('/books',bookController.getBooks);

Note: As of Express 4.x you can define your routes like so:

app.route('/books').get(bookController.getBooks).post(bookController.createBooks).put(bookController.updateBooks).delete(bookController.deleteBooks)

And here is how a route would look if it required anauthentication and anauthorization middleware:

app.route('/api/twitter').all(passportConfig.isAuthenticated).all(passportConfig.isAuthorized).get(apiController.getTwitter).post(apiController.postTwitter)

Use whichever style that makes sense to you. Either one is acceptable. I think that chaining HTTP verbs onapp.route is a very clean and elegant approach, but on the other hand, I can no longer see all my routes at a glance when you have one route per line.

Step 2. Create a new schema and a modelBook.js inside themodels directory.

constmongoose=require('mongoose');constbookSchema=newmongoose.Schema({name:String});constBook=mongoose.model('Book',bookSchema);module.exports=Book;

Step 3. Create a new controller file calledbook.js inside thecontrollers directory.

/** * GET /books * List all books. */constBook=require('../models/Book.js');exports.getBooks=(req,res)=>{Book.find((err,docs)=>{res.render('books',{books:docs});});};

Step 4. Import that controller inapp.js.

constbookController=require('./controllers/book');

Step 5. Createbooks.pug template.

extendslayoutblockcontent.page-header    h3 All Books  ulfor bookin books      li=book.name

That's it! I will say that you could have combined Step 1, 2, 3 as following:

app.get('/books',(req,res)=>{Book.find((err,docs)=>{res.render('books',{books:docs});});});

Sure, it's simpler, but as soon as you pass 1000 lines of code inapp.js it becomes a little challenging to navigate the file.I mean, the whole point of this boilerplate project was to separate concerns, so you couldwork with your teammates without running intoMERGE CONFLICTS. Imagine you have four developersworking on a singleapp.js, I promise you it won't be fun resolving merge conflicts all the time.If you are the only developer, then it's okay. But as I said, once it gets up to a certain LoC size, it becomes difficult to maintain everything in a single file.

That's all there is to it. Express.js is super simple to use.Most of the time you will be dealing with other APIs to do the real work:Mongoose for querying database, socket.io for sending and receiving messages over websockets,sending emails viaNodemailer, form validation usingexpress-validator library,parsing websites usingCheerio, etc.

Dan Stroot submitted an excellentpull request that adds a real-time dashboard with socket.io.And as much as I'd like to add it to the project, I think it violates one of the mainprinciples of the Hackathon Starter:

When I started this project, my primary focus was on simplicity and ease of use.I also tried to make it as generic and reusable as possible to cover most use cases ofhackathon web apps,without being too specific.

When I need to use socket.io, Ireally need it, but most of the time - I don't. But more importantly, websockets support is still experimental on most hosting providers. As of October 2013,Heroku supports websockets, but not until you opt-in by running this command:

herokulabs:enablewebsockets-amyapp

And what if you are deploying to OpenShift? They do support websockets, but it is currently in apreview state. So, for OpenShift you would need to change the socket.io connect URI to the following:

constsocket=io.connect('http://yoursite-namespace.rhcloud.com:8000');

Wait, why is it on port 8000? Who knows, and if I didn't run across thisblog postI wouldn't even know I had to use port 8000.

I am really glad that Heroku and OpenShift at leasthave a websockets support, because many other PaaS providers still do not support it.Due to the aforementioned issues with websockets, I cannot include socket.io as part of the Hackathon Starter.For now...If you need to use socket.io in your app, please continue reading.

First, you need to install socket.io:

npminstallsocket.io

Replaceconst app = express(); with the following code:

constapp=express();constserver=require('http').Server(app);constio=require('socket.io')(server);

I like to have the following code organization inapp.js (from top to bottom): module dependencies,import controllers, import configs, connect to database, express configuration, routes,start the server, socket.io stuff. That way I always know where to look for things.

Add the following code at the end ofapp.js:

io.on('connection',(socket)=>{socket.emit('greet',{hello:'Hey there browser!'});socket.on('respond',(data)=>{console.log(data);});socket.on('disconnect',()=>{console.log('Socket disconnected');});});

One last thing left to change:

app.listen(app.get('port'),()=>{

to

server.listen(app.get('port'),()=>{

At this point, we are done with the back-end.

You now have a choice - to include your JavaScript code in Pug templates or have all your client-sideJavaScript in a separate file - inmain.js. I admit, when I first started with Node.js and JavaScript in general,I placed all JavaScript code inside templates because I have access to template variables passed in from Expressright then and there. It's the easiest thing you can do, but also the least efficient and harder to maintain. Since then Ialmost never include inline JavaScript inside templates anymore.

But it's also understandable if you want to take the easier road.Most of the time you don't even care about performance during hackathons, you justwant to"get shit done" before the time runs out.Well, either way, use whichever approach makes more sense to you. At the end of the day,it'swhat you build that matters, nothow you build it.

If you want to stick all your JavaScript inside templates, then inlayout.pug -your main template file, add this tohead block.

script(src='/socket.io/socket.io.js')script.let socket=io.connect(window.location.href);socket.on('greet',function (data) {console.log(data);socket.emit('respond', { message:'Hey there, server!' });    });

Note: Notice the path of thesocket.io.js, you don't actuallyhave to havesocket.io.js file anywhere in your project; it will be generatedautomatically at runtime.

If you want to have JavaScript code separate from templates, move that inlinescript code intomain.js, inside the$(document).ready() function:

$(document).ready(function(){// Place JavaScript code here...letsocket=io.connect(window.location.href);socket.on('greet',function(data){console.log(data);socket.emit('respond',{message:'Hey there, server!'});});});

And we are done!

Declares a read-only named constant.

constname='yourName';

Declares a block scope local variable.

letindex=0;

Using the`${}` syntax, strings can embed expressions.

constname='Oggy';constage=3;console.log(`My cat is named${name} and is${age} years old.`);

To import functions, objects or primitives exported from an external module. These are the most common types of importing.

constname=require('module-name');

const{ foo, bar}=require('module-name');

To export functions, objects or primitives from a given file or module.

module.exports={ myFunction};

module.exports.name='yourName';

module.exports=myFunctionOrClass;

The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.

myFunction(...iterableObject);

<ChildComponent{...this.props}/>

A Promise is used in asynchronous computations to represent an operation that hasn't completed yet, but is expected in the future.

varp=newPromise(function(resolve,reject){});

Thecatch() method returns a Promise and deals with rejected cases only.

p.catch(function(reason){/* handle rejection */});

Thethen() method returns a Promise. It takes two arguments: callback for the success & failure cases.

p.then(function(value){/* handle fulfillment */},function(reason){/* handle rejection */});

ThePromise.all(iterable) method returns a promise that resolves when all of the promises in the iterable argument have resolved or rejects with the reason of the first passed promise that rejects.

Promise.all([p1,p2,p3]).then(function(values){console.log(values)});

Arrow function expression. Shorter syntax & lexically binds thethis value. Arrow functions are anonymous.

singleParam=>{statements}

()=>{statements}

(param1,param2)=>expression

constarr=[1,2,3,4,5];constsquares=arr.map(x=>x*x);

The class declaration creates a new class using prototype-based inheritance.

classPerson{constructor(name,age,gender){this.name=name;this.age=age;this.gender=gender;}incrementAge(){this.age++;}}

🎁Credits:DuckDuckGo and@DrkSephy.

🔝_{back to top}

Math.floor(Date.now()/1000);

moment().unix();

varnow=newDate();now.setMinutes(now.getMinutes()+30);

moment().add(30, 'minutes');

// DD-MM-YYYYvarnow=newDate();varDD=now.getDate();varMM=now.getMonth()+1;varYYYY=now.getFullYear();if(DD<10){DD='0'+DD;}if(MM<10){MM='0'+MM;}console.log(MM+'-'+DD+'-'+YYYY);// 03-30-2016

console.log(moment(new Date(), 'MM-DD-YYYY'));

// hh:mm (12 hour time with am/pm)varnow=newDate();varhours=now.getHours();varminutes=now.getMinutes();varamPm=hours>=12 ?'pm' :'am';hours=hours%12;hours=hours ?hours :12;minutes=minutes<10 ?'0'+minutes :minutes;console.log(hours+':'+minutes+' '+amPm);// 1:43 am

console.log(moment(new Date(), 'hh:mm A'));

vartoday=newDate();varnextWeek=newDate(today.getTime()+7*24*60*60*1000);

moment().add(7, 'days');

vartoday=newDate();varyesterday=date.setDate(date.getDate()-1);

moment().add(-1, 'days');

🔝_{back to top}

User.find((err,users)=>{console.log(users);});

letuserEmail='example@gmail.com';User.findOne({email:userEmail},(err,user)=>{console.log(user);});

User.find().sort({_id:-1}).limit(5).exec((err,users)=>{console.log(users);});

Let's suppose that each user has avotes field and you would like to countthe total number of votes in your database across all users. One veryinefficient way would be to loop through each document and manually accumulatethe count. Or you could useMongoDB Aggregation Framework instead:

User.aggregate({$group:{_id:null,total:{$sum:'$votes'}}},(err,votesCount)=>{console.log(votesCount.total);});

🔝_{back to top}

You will need docker and docker-compose installed to build the application.

• Docker installation

• Common problems setting up docker

After installing docker, start the application with the following commands :

# To build the project for the first time or when you add dependenciesdocker-compose build web# To start the application (or to restart after making changes to the source code)docker-compose up web

To view the app, find your docker IP address + port 8080 ( this will typically behttp://localhost:8080/ ). To use a port other than 8080, you would need to modify the port in app.js, Dockerfile, and docker-compose.yml.

Once you are ready to deploy your app, you will need to create an account with a cloud platform to host it. These are not the only choices, but they are my top picks. From my experience, the easiest way to get started is withHeroku. It will automatically restart your Node.js process when it crashes, has zero-downtime deployments and supports custom domains on free accounts. Additionally, you cancreate an account withMongoDB Atlas and then pick one of the4 providers below.Again, there are plenty of other choices, and you are not limited to just the oneslisted below.

• Download and installHeroku Toolbelt
• In a terminal, runheroku login and enter your Heroku credentials
• Fromyour app directory runheroku create
• Runheroku addons:create mongolab. This will set up the mLab add-on and configure theMONGODB_URI environment variable in your Heroku app for you.
• Lastly, dogit push heroku master. Done!

Note: To install Heroku add-ons your account must be verified.

• Go tohttps://www.mongodb.com/cloud/atlas
• Click the greenGet started free button
• Fill in your information then hitGet started free
• You will be redirected to Create New Cluster page.
• Select aCloud Provider and Region (such as AWS and a free tier region)
• Select cluster Tier toFree Shared Clusters
• Give Cluster a name (default: Cluster0)
• Click on green⚡Create Cluster button
• Now, to access your database you need to create a DB user. To create a new MongoDB user, from theClusters view, select theSecurity tab
• Under theMongoDB Users tab, click on+Add New User
• Fill in a username and password and give it eitherAtlas Admin User Privilege
• Next, you will need to create an IP address whitelist and obtain the connection URI. In the Clusters view, under the cluster details (i.e. SANDBOX - Cluster0), click on theCONNECT button.
• Under section(1) Check the IP Whitelist, click onALLOW ACCESS FROM ANYWHERE. The form will add a field with0.0.0.0/0. ClickSAVE to save the0.0.0.0/0 whitelist.
• Under section(2) Choose a connection method, click onConnect Your Application
• In the new screen, selectNode.js as Driver and version2.2.12 or later.WARNING: Do not pick 3.0 or later since connect-mongo can't handle mongodb+srv:// connection strings.
• Finally, copy the URI connection string and replace the URI in MONGODB_URI of.env.example with this URI string. Make sure to replace the with the db User password that you created under the Security tab.
• Note that after some of the steps in the Atlas UI, you may see a banner statingWe are deploying your changes. You will need to wait for the deployment to finish before using the DB in your application.

Note: As an alternative to MongoDB Atlas, there is alsoCompose.

• First, install this Ruby gem:sudo gem install rhc 💎
• Runrhc login and enter your OpenShift credentials
• From your app directory runrhc app create MyApp nodejs-0.10
• Note:MyApp is the name of your app (no spaces)
• Once that is done, you will be provided withURL,SSH andGit Remote links
• Visit providedURL, and you should see theWelcome to your Node.js application on OpenShift page
• Copy and pasteGit Remote intogit remote add openshift YOUR_GIT_REMOTE
• Before you push your app, you need to do a few modifications to your code

Add these two lines toapp.js, just place them anywhere beforeapp.listen():

varIP_ADDRESS=process.env.OPENSHIFT_NODEJS_IP||'127.0.0.1';varPORT=process.env.OPENSHIFT_NODEJS_PORT||8080;

Then changeapp.listen() to:

app.listen(PORT,IP_ADDRESS,()=>{console.log(`Express server listening on port${PORT} in${app.settings.env} mode`);});

Add this topackage.json, aftername andversion. This is necessary because, by default, OpenShift looks forserver.js file. And by specifyingsupervisor app.js it will automatically restart the server when node.js process crashes.

"main":"app.js","scripts":{"start":"supervisor app.js"},

• Finally, you can now push your code to OpenShift by runninggit push -f openshift master
• Note: The first time you run this command, you have to pass-f (force) flag because OpenShift creates a dummy server with the welcome page when you create a new Node.js app. Passing-f flag will override everything with yourHackathon Starter project repository.Do not rungit pull as it will create unnecessary merge conflicts.
• And you are done!

• Login toWindows Azure Management Portal
• Click the+ NEW button on the bottom left of the portal
• ClickCOMPUTE, thenWEB APP, thenQUICK CREATE
• Enter a name forURL and select the datacenterREGION for your web site
• Click onCREATE WEB APP button
• Once the web site status changes toRunning, click on the name of the web site to access the Dashboard
• At the bottom right of the Quickstart page, selectSet up a deployment from source control
• SelectLocal Git repository from the list, and then click the arrow
• To enable Git publishing, Azure will ask you to create a user name and password
• Once the Git repository is ready, you will be presented with aGIT URL
• Inside yourHackathon Starter directory, rungit remote add azure [Azure Git URL]
• To push your changes rungit push azure master
• Note:You will be prompted for the password you created earlier
• OnDeployments tab of your Windows Azure Web App, you will see the deployment history

NOTEAt this point it appears that Bluemix's free tier to host NodeJS apps is limited to 30 days. If you are looking for a free tier service to host your app, Heroku might be a better choice at this point

1. Create a Bluemix Account

   Sign up for Bluemix, or use an existing account.

2. Download and install theCloud Foundry CLI to push your applications to Bluemix.

3. Create amanifest.yml file in the root of your application.

applications:- name:      <your-app-name>  host:      <your-app-host>  memory:    128M  services:  - myMongo-db-name

The host you use will determinate your application URL initially, e.g.<host>.mybluemix.net.The service name 'myMongo-db-name' is a declaration of your MongoDB service. If you are using other services like Watson for example, then you would declare them the same way.

1. Connect and login to Bluemix via the Cloud-foundry CLI

$ cf login -a https://api.ng.bluemix.net

1. Create aMongoDB service

$ cf create-service mongodb 100 [your-service-name]

Note: this is a free and experiment verion of MongoDB instance.Use the MongoDB by Compose instance for production applications:

$ cf create-service compose-for-mongodb Standard [your-service-name]'

1. Push the application

   $ cf push

   $ cf env <your-app-name >(To view the *environment variables* created for your application)

Done, now go to the staging domain (<host>.mybluemix.net) and see your app running.

Cloud Foundry CommandsMore Bluemix samplesSimple ToDo app in a programming language of your choice

Be sure to check out the full list of Watson services to forwarder enhance your application functionality with a little effort. Watson services are easy to get going; it is simply a RESTful API call. Here is an example of aWatson Toner Analyzer to understand the emotional context of a piece of text that you send to Watson.

Conversation - Quickly build and deploy chatbots and virtual agents across a variety of channels, including mobile devices, messaging platforms, and even robots.

Discovery - Unlock hidden value in data to find answers, monitor trends and surface patterns with the world’s most advanced cloud-native insight engine.

Language Translator - Translate text from one language to another.

Natural Language Classifier - Interpret and classify natural language with confidence.

Natural Language Understanding - Analyze text to extract meta-data from content such as concepts, entities, keywords and more.

Personality Insights - Predict personality characteristics, needs and values through written text.

Speech to Text - Convert audio and voice into written text for quick understanding of content.

Text to Speech - Convert written text into natural sounding audio in a variety of languages and voices.

Tone Analyzer - Understand emotions, social tendencies and perceived writing style.

Visual Recognition - Tag, classify and search visual content using machine learning.

Click here for live demos of each Watson service.

• Download and install Node.js

• Select or create a Google Cloud Platform Console project

• Enable billing for your project (there's a $300 free trial)

• Install and initialize theGoogle Cloud SDK

• Create anapp.yaml file at the root of yourhackathon-starter folder with the following contents:

  runtime:nodejsenv:flexmanual_scaling:instances:1

• Make sure you've setMONGODB_URI in.env.example

• Run the following command to deploy thehackathon-starter app:

  gcloud app deploy

• Monitor your deployed app in the Cloud Console

• View the logs for your app in the Cloud Console

If you are starting with this boilerplate to build an application for prod deployment, or if after your hackathon you would like to get your project hardened for production use, seeprod-checklist.md.

You can find the changelog for the project in:CHANGELOG.md

If something is unclear, confusing, or needs to be refactored, please let me know.Pull requests are always welcome, but due to the opinionated nature of thisproject, I cannot accept every pull request. Please open an issue beforesubmitting a pull request. This project usesAirbnb JavaScript Style Guide with afew minor exceptions. If you are submitting a pull request that involvesPug templates, please make sure you are usingspaces, not tabs.

The MIT License (MIT)

Copyright (c) 2014-2019 Sahat Yalkabov

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.