Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Killeon Patterson
18,527 PointsHeroku production route
Hello,
I've built a MERN app that I started with create-react. I'm struggling with preparing the app for production. I have the project pushed to heroku succesfully, although the front end routes are failing to connect to the backend because incorrect route address/environment variables. I've created the .env file and can't figure out how to adjust my routes to work in production https://theflyingpot-f933695280df.herokuapp.com - this was the home route before I removed the app from heroku until I fixed the issue. How do I adjust my routes to serve the resources in production? thank you
3 Answers
Rohald van Merode
Treehouse StaffHey Killeon Patterson 👋
This issue arises because Heroku's default server configuration doesn't know how to handle client-side routes. By default a server would look for static files like /blog/blog-title/index.html when navigating to /blog/blog-title. These static file location are not present in your React app, leading to 404 errors when accessing routes directly.
To fix this, you'll want to create a static.json file in your project root which tells Heroku to serve your index.html for all routes, effectively letting your React app handle the routing once it's loaded in the browser.
{
"root": "build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}
This configuration will bridge the gap between server-side and client-side routing, ensuring your React Router works as expected.
Laura has a workshop dedicated to Deploying a React App if you're interested to learn more 🙂
Hope this helps!
Killeon Patterson
18,527 PointsHello, Thank you for your reply. What should the route look like? the app errors undefined - https://theflying-pot-9b52a70853da.herokuapp.com/undefined/users/6689c8f4f90d5da37293589b/patronOrders Request Method: GET - but that actual route is defined
import React, { useState, useEffect, useContext } from 'react';
import axios from 'axios';
import UserContext from '../context/UserContext';
import '../styles/Kitchen.css'; // Ensure this import is correct
const Kitchen = () => {
const { authUser } = useContext(UserContext);
const [orders, setOrders] = useState([]);
const [expandedOrders, setExpandedOrders] = useState({});
const [checkedItems, setCheckedItems] = useState(() => {
const savedCheckedItems = localStorage.getItem('checkedItems');
return savedCheckedItems ? JSON.parse(savedCheckedItems) : {};
});
const [updateCounts, setUpdateCounts] = useState(() => {
const savedCounts = localStorage.getItem('updateCounts');
return savedCounts ? JSON.parse(savedCounts) : {};
});
const terms = "https://theflying-pot-9b52a70853da.herokuapp.com";
useEffect(() => {
const fetchOrders = async () => {
try {
----> const response = await axios.get(`${terms}/api/users/${encodeURIComponent(authUser._id)}/orders`); <----
if (response.status === 200) {
setOrders(response.data.orders);
const initialExpanded = response.data.orders.reduce((acc, _, index) => {
acc[index] = true;
return acc;
}, {});
setExpandedOrders(initialExpanded);
} else {
console.error('Error fetching orders: status', response.status);
}
} catch (error) {
console.error('Error fetching orders:', error);
}
};
if (authUser && authUser._id) {
fetchOrders();
}
}, [authUser]);
const toggleOrder = (index) => {
setExpandedOrders(prevState => ({
...prevState,
[index]: !prevState[index]
}));
};
I am interested. Unfortunately, my subscription doesn't give access to the Heroku video. I connected the Netilify, added the _redirects, and npm run build in the client - I still get the 404 error - Do you know how to resolve this with heroku? Thank you.
Rohald van Merode
Treehouse StaffThanks for the additional content and live link, that changes things... I thought you had issues with navigating your React Router routes, which seems to be working perfectly fine already...
I have no idea where the undefined in that url may come from to be honest. I never use Heroku myself and am not familiar with how it handles env variables. I'd suggest double checking if there aren't any mistakes in the value of that env variable or if there aren't any prefixes in your settings that try to append something that shouldn't be there.
Killeon Patterson
18,527 PointsOk, thank you anyway. I have a question about your response. In what environment did you find the routes to be working perfectly, production or development? Thank you for you time.
Rohald van Merode
Treehouse Staffproduction