You can access the data of your custom post types in a javascript file using Rest API and jQuery.

For example, you want to display the ID of your recipe in a div with the class of "the_id" and the title of the recipe in a div with the class of "the_title". Moreover I'm assuming your post type has the name of "recipes" and we just want to get one recipe.

$(document).ready(function() {
    $.ajax({
        url: "http://yoururl.com/wp-json/wp/v2/recipes?per_page=1"
    }).then(function(data) {
       $('.the_id').append(data[0].id);
       $('.the_title').append(data[0].title.rendered);
    });
});

You can reduce the number of posts you are getting with the "per_page" parameter.

In data you can now access everything the Rest API gives you, in the example the ID (via data.id) and the title (via data.title.rendered).

This might interest you: https://developer.wordpress.org/rest-api/reference/

Here the fields you can access by default: https://developer.wordpress.org/rest-api/reference/posts/