Deploying backend + frontend together

I have a react app + api I’d like to deploy. My project is split into two directores, backend/ and frontend/. My backend/package.json file has this build command:

"build": "cd ../frontend && npm install && npm run build"

This works fine locally. When I try to set my Netlify deployment settings, ideally, they would look like this:

Base: “backend/”
Command: “npm run build”
Publish: “frontend/build/”

However, this is automatically prepending backend to the pubilsh path, so it becomes “backend/frontend/build/” which does not exist.

I’m sure I’ve got my setup fundamentally wrong (I’m relatively new to React). How can I package my server code + my frontend code together to deploy to production?

1 Like

I moved my backend code into a function but I’m having trouble getting my app to hit the api endpoint.
Netlify has my api endpoint here at https://<prod_domain>/.netlify/functions/api. My base in my netlify.toml file is frontend/. Here is my code structure:

image

My stripe.js file:

require('dotenv').config()
const express = require('express');
const app = express();
const stripe = require('stripe')(process.env.REACT_APP_STRIPE_KEY)

const router = express.Router();

router.post('/create-checkout-session', async (req, res) => {
  const cartItems = req.body['cartItems'][0];
  console.log(cartItems);
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: cartItems['name'],
          },
          unit_amount: cartItems['price'] * 100,
        },
        quantity: cartItems['cartQuantity'],
      },
    ],
    mode: 'payment',
    success_url: `${process.env.REACT_APP_CLIENT_URL}/checkout-success`,
    cancel_url: `${process.env.REACT_APP_CLIENT_URL}/cart`,
  });

  res.send({url: session.url});
});

module.exports = router;

Then I’m trying to call that in a component here:

axios.post(`${url}/stripe/create-checkout-session`, {
....
}

But I’m getting a 404 POST error here:

POST
https://<prod_domain>/.netlify/functions/api/stripe/create-checkout-session

Can you provide a site id/slug please?

let us know how you getting on with this