This is not intended to be a long post, just wanted to make a quick post showing some of the details in order to get a local gatsby development working with a node + express app.
First of all, this is intended if for example you are trying to make a post request to your localhost:5000 express api. This is going to give you a cors - cross-origin: Access-Control-Allow-Origin issue.
Also, take in account, my gatsby project is running @ localhost:8000 and my node app is running @ localhost:5000.
How to solve it: Node
First of all in our node app, we'll install cors npm package:
npm install cors
Then, well add the following config
app.use(cors());
app.all("/*", function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
next();
});
of course, this is added to our app.js. My specific app.js ended like this:
//First require express
const express = require("express");
// require path for absolute path for sendFile
const path = require("path");
const cors = require("cors");
//initialize express
const app = express();
app.use(cors());
app.all("/*", function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
next();
});
//Body parser for axios calls
app.use(express.json({ extended: false }));
app.use(express.urlencoded({ extended: false }));
//Mailing Api route
app.use("/api/sendmail", require("./routes/sendmail"));
//if somebody decides to go to / route
app.get("/", (req, res) => {
res.sendFile(path.resolve(__dirname, "index.html"));
});
const PORT = process.env.PORT || 5000;
app.listen(PORT, console.log(`server started on ${PORT}`));
So we are done, take in to account my api starts with /api/sendmail
How to solve it on gatsby:
We are going to go to our gatsby-config.js file, in the root folder:
and to our module.exports we'll add the following like so:
module.exports = {
/* Your site config here */
proxy: {
prefix: "/api",
url: "localhost:5000",
},
};
This is because our node express server is running on localhost 5000.
Now to make use of our api, we'll just axios.post for example to the following adress like so:
axios
.post("/sendmail/", object)
.then((response) => console.log(response.config.data));
this will go directly to our localhost:5000/api/sendmail which is defined in our nodejs app.
Test it out!
cheers