✏ #100DaysOfMERN - The App
Today I proudly present to you: #100DaysOfMERN - The App 🤟
UPDATE:
Since Heroku updated their terms of service, the app is now hosted on my own server: #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 committed 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 subscribe to my newsletter. Until next time 👋
✏ Previous Posts
You can find an overview of all previous posts with tags and tag search here: