#100DaysOfMERN - Day 32

Subscribe to my newsletter and never miss my upcoming articles

āœ #100DaysOfMERN - The App

Today I proudly present to you: #100DaysOfMERN - The App šŸ¤Ÿ

It gives you an overview of all previous posts with tags, and a tag search function - so finally, I can remove that long messy list of links at the bottom of each post.

It's a very basic app, and there's a lot to improve - the most important part being that the M in the app title is a mischievious lie... there's no database involved, the data comes from a file. But it does have a Node backend, set up with Express, and a React frontend. If you're coming from a frontend background and dive into this stack, the M is definitely the hardest part.

For now, I'm mostly happy that I managed to deploy an App to Heroku - which is what today's blog will be about. For more detailed instructions, you can also follow this guide: How to Create a React App with a Node Backend: The Complete Guide


āœ How to Deploy an App to Heroku

Tools/installations

You need to have Git installed to deploy to Heroku, which most of you probably have already.

I then used the Heroku CLI. After downloading and installing, you can verify if the installation was successful from the command line with:

heroku --version

I ran into issues when trying to use it from my Editor's built-in terminal (I'm using Atom Platformio IDE), and I haven't gotten to the bottom of it yet - but one workaround is to use npx heroku instead of heroku.

You'll also need to create an account with Heroku.

The App Setup

First, create a project folder and run

npm init
git init

It's important that the git repository is the root folder of the project. When you later add the frontend, create-react-app won't initialise another repository, if the root folder is already watched by git.

The Frontend

From the root folder, run

npx create-react-app frontend

Add this to the package.json in the frontend folder (use any port you like):

"proxy": "http://localhost:3001"

I think this allows you to put a relative path in your HTTP requests from the frontend, like this:

    useEffect(() => {
        const uri = '/api/posts';
        axios.get(uri).then(res => setPosts(res.data));
    },[])

And that's it for the frontend.

The Backend

Now, create a backend folder with your index.js (or however you want to call it, mine is server.js) for the server code. I needed to import my blog posts data from a file in my backend folder, and to create an endpoint api/posts. The rest is pretty much boilerplate:

server.js

const express = require('express');
const path = require('path');
const posts = require('./data/postsdata.js');

// server setup
const app = express();
app.use(express.json());

// serve from the build folder
app.use(express.static(path.resolve(__dirname, '../frontend/build')));

// endpoint to fetch the blog posts data
app.get('/api/posts', (req, res) => {
    if (req.query.tag){
        const filtered = posts.filter(p => p.tags.some(tag => tag.includes(req.query.tag)));
        res.json(filtered)
    } else {
        res.json(posts)
    }
})

// heroku will add the .env for you
// the fallback port is what you specified above in the frontend's package.json 
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => console.log(`server running on port ${PORT}`))

Scripts in the root folder's package.json

Add a start script with the path to your server file, and a build script to switch into the frontend folder, install all dependencies from the frontend package.json and create the build:

  "scripts": {
    "start": "node backend/server.js",
    "build": "cd frontend && npm install && npm run build"
  }

Deploy to Heroku

In the command line, first log in to your account:

heroku login

This will open a page in your browser where you can log in.

If you haven't staged and commited all your files yet, now's the time to do that:

heroku git:remote -a mern100daysof
git add .
git commit -am "Deploy to Heroku"
git push heroku master

It'll take a few minutes for the build to be created. Afterwards, you should hopefully see a message in the terminal that the build was successful, and a link to your freshly deployed App šŸš€


āœ Resources

How to Create a React App with a Node Backend: The Complete Guide


āœ Recap

I've learned

  • how to deploy to Heroku

āœ Next:

  • more MongoDB with Mongoose

āœ Thanks for reading!

I do my best to thoroughly research the things I learn, but if you find any errors or have additions, please leave a comment below, or @ me on Twitter. If you liked this post, I invite you to subsribe to my newsletter. Until next time šŸ‘‹


āœ Previous Posts

You can find an overview of all previous posts with tags and tag search here:

#100DaysOfMERN - The App

Comments (3)

Apurv Chimralwar's photo

Thanks, Do you know any good place to learn and practice react?

jsdisco's photo

Hi there, I learned React mostly with these two Scrimba courses (first one is free):

Learn React for Free

The React Bootcamp

After that, I could build my own small projects and just kept coding to practice.

This playlist looks interesting too, it's on one of my favourite YT channels and very very recent: Full Modern React Tutorial

Apurv Chimralwar's photo

jsdisco

Thank You very much for the lovely buffet.ā¤ļø I will be starting this morning with scrimba and the youtube videos.šŸ’Ŗ