How to implement json server functionality using "functions"?

Hi all! :smiley:

I’m doing an educational project - a mini copy of the site https://careers.google.com using vue.js.

my goal: I want to make a functionality that mimics json-server: in the db.json file I store test data for vacancies that I want to fill the site with. In a good way, this requires a separate server where requests will be sent, I understand this. But I want to do it within a single repository since I have a pretty simple project.

I did this (seemingly), as indicated in the instructions:

  • installed netlify: pnpm add netlify-cli -D
  • created the netlify.toml file,
  • where I specified the following settings:
[dist]
functions = './functions'

further, in the root of the project,

  • I created a folder: functions, where I placed the jobs.js

file, which, according to my idea, should be executed on the server and give my data - jobs. Here is its content:

// domain/.netlify/functions/jobs
require('dotenv')
    .config();

exports. handler = async function (event, context) {
  
  const db = {
    // my json data with my test jobs
  }
  return {
      statusCode: 200
      body: JSON.stringify(db),
  };
};

I get this data like this:

import axios from "axios";
import type { Job } from "@/api/types";

const getJobs = async() => {
  const baseUrl = import.meta.env.VITE_APP_API_URL;
  const url = `${baseUrl}/jobs`;
  const response = await axios.get<Job[]>(url);
  return response.data;
};

export default getJobs;

where VITE_APP_API_URL=https://google-careers-clone.netlify.app

which I specified in the .env file:


this is what the settings for deploying to netlify look like:


my problem: for some reason I am not getting this data - for some reason the request that I described above is executed incorrectly or is not executed at all:

import axios from "axios";
import type { Job } from "@/api/types";

const getJobs = async() => {
  const baseUrl = import.meta.env.VITE_APP_API_URL;
  const url = `${baseUrl}/jobs`;
  const response = await axios.get<Job[]>(url);
  return response.data;
};

export default getJobs;

this is what i get at: google-careers-clone.netlify.app/#/jobs/results


but this data is available at https://google-careers-clone.netlify.app/.netlify/functions/jobs:


I note that everything works locally for me.

Can you tell me what I’m doing wrong?

@chaosmos As you’ve mentioned, the location of the function is:
https://google-careers-clone.netlify.app/.netlify/functions/jobs

Functions aren’t automatically exposed at other routes, so there is no https://google-careers-clone.netlify.app/jobs, which is why it returns a 404.

If you did wanted the route /jobs to point to /.netlify/functions/jobs you could use a Proxy.

However you would actually probably want it to be something like /api/jobs, so that you didn’t pollute the regular URL space of your site.

1 Like

thanks for the answer!

could you explain in more detail how to do this?

this is my study project and my main goal is to make it work so that I can put my study project online somewhere. all I need is to display a list of fake jobs (my project is a mini copy of careers.google.com).

The detail is in the documentation that I’ve linked to.

1 Like

thanks!

if I understood the documentation correctly, then I will need to specify the following setting in the netlify.toml file:

[[redirects]]
  from="/jobs"
  to="/.netlify/functions/jobs"

right?

in the end, my netlify.toml:

[dist]
functions = './functions'

[[redirects]]
from="/jobs"
to="/.netlify/functions/jobs"

@chaosmos Without specifying a status that would generate a 301 redirect, as it’s the default.

What you want is a rewrite/proxy, so a status=200

1 Like

I still can’t figure out how to set it all up. i configured the netlify.toml file like this:

[dist]
functions = './functions'

[[redirects]]
from="/jobs"
to="/.netlify/functions/jobs"
status=200

[[redirects]]
from="/degrees"
to="/.netlify/functions/jobs"
status=200

[[redirects]]
from="/spotlights"
to="/.netlify/functions/jobs"
status=200

i am accessing my json data:


but for some reason they, this data, are not displayed:


I found this message in the console:

TypeError: e.jobs.filter is not a function


I display a list of vacancies (“jobs”) by applying a selection to it:


it’s probably something to do with the redirect I specified in the netlify.toml file, but I can’t figure out exactly what the problem is.

the problem is “TypeError: e.jobs.filter is not a function at Proxy.FILTERED_JOBS”:


it comes from this code:

There’s not a direct correlation between your application code and the API/JSON data, so getting it to return a value doesn’t guarantee that no other code in your application will fail.

It’s not.

This says at that point in the execution that jobs is not something that has a filter method, in your case that it isn’t the Array you expect it to be.

This is likely because while you’ve created routes for /jobs, /degrees, /spotlights, you’re routing them all to the same /.netlify/functions/jobs function, which always returns the top level Object from your JSON data.

You can confirm this by visiting:
https://google-careers-clone.netlify.app/jobs
https://google-careers-clone.netlify.app/degrees
https://google-careers-clone.netlify.app/spotlights

If you’re expecting those to return only their matching key from within your JSON data, then you would need to adjust your function logic to account for that.

1 Like

thanks for your help and patience!

I was able to solve my problem: I placed a json server with my data on the render.com platform and from there I get my data.

I left the site itself on the netlify.com platform

Not too sure why you struggled to get it working on Netlify since the data was returning fine, but if render makes more sense for you I can’t fault it, whatever works!

1 Like

I don’t know why I couldn’t solve my problem with netlify “functions” - I must have done something wrong.

I have been trying to do this for a long time. then I just made a simple web service on the render.js platform and placed my data and json server there. and then I just specified the address (https://json-google-server.onrender.com/) where the request should be made on the site side. and everything worked.

the only disadvantage of this solution is that the server “wakes up” for a long time.

I think that the task I was trying to solve is quite popular - how to make a test json server where you can send requests on the netlify.com platform. I googled how to do this for a long time - as I understand it, the only solution is that it can be done somehow through the “functions” functionality - but I could not figure out how to do it.

if netlify.com somehow makes this easier, that would be awesome!

@chaosmos I’m not sure why you couldn’t get it to work, but did you consider that if you’re just loading .json data you could have simply made some files like:

/data/jobs.json
/data/degree.json
/data/spotlights.json

Then loaded them directly?

Or if you did need to fake them to some non .json path, setup a _redirects proxy like:

/api/jobs /data/jobs.json 200
/api/degree /data/degree.json 200
/api/spotlights /data/spotlights.json 200

I don’t know why you need a “server” to return a .json file, unless you’re doing something at runtime as part of the request.