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
1. Deploy project to Netlify
Now, push the button below to check it out in your own Netlify account!
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.
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.
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!