"Jabba" the Netlify Starter App

If anyone loves to create new side projects just about every other day like I do, then I’ve created the perfect starter/boilerplate web app to get you up and running in just minutes.

Here’s what all it includes:

  • Netlify Identity widget for authentication
  • React app (create-react-app) for the front-end
  • Netlify functions for the backend
  • MongoDB database hosted on mLab for storage

null

1. Deploy project to Netlify

Now, push the button below to check it out in your own Netlify account!

Deploy to Netlify

Now, let’s talk about what you need to do as far as setting it up.

2. Enable Netlify Identity

After you’ve successfully deployed it to Netlify after clicking the deploy button above, you’ll need to the Identity tab in your Netlify project and click on the Enable Identity button.

null

3. Setup your environment variables

Next, you’ll want to head over to the Settings > Build & Deploy > Build environment variables section and add your DB_URL variable so that you can connect to your database. For this project, the Key should be DB_URL and the value should be your Mongo URI from mLab. Here’s some documentation on how to do that if you’re not sure.

null

4. Deploy your site again

After saving your DB_URL variable, head over to the Deploys tab and kick off a new deploy to pick up that new environment variable.

Now, you should be able to open up the Network tab in your Chrome DevTools and see some responses from clicking all 3 buttons in the app 🎉.

Happy hacking!

Parker Agee

Software Engineer

Nashville, TN https://parkeragee.com