Creating a new post using Admin API

Integrations & API
1

Hi,

I’m trying to use Admin API to create a new post with the data (title,description, etc) coming from a form filled by an user.
The main purpose is to create a standard post for all job offers and since posts cannot be duplicated or have a template for the posts we found using Admin API a solution.

The form in page-add-job-offer.hbs file (template file for the page where the form will be displayed). (located in theme folder)

<form id="add-new-job-form">
    <input type="text" name="title" id="title" title="Title" placeholder="Title">
    <input type="text" name="period-type" id="period-type" title="Add job period type" class="period-type" placeholder="Add job period type">
    <textarea rows="6" name="short-description" id="short-description" title="Add short description"
                    placeholder="Add short description"></textarea>
    <input type="text" name="_gotcha" style="display:none">
    <input class="gh-btn-main gh-btn-primary" type="submit" name="submit" id="submit" value="Add job">
</form>

Javascript that should use Admin API to create new post (hard coded info for now). This is located in theme folder/assets/js/custom.js file

const GhostAdminAPI = require('@tryghost/admin-api');

// API config
const api = new GhostAdminAPI({
    url: 'http://localhost:2368',
    key: 'ADMIN-API-KEY',
    version: "v3"
});
$(function () {
    addJobFormSubmit();
});

function addJobFormSubmit() {
    $('#add-new-job-form').on('submit', function (e) {
        e.preventDefault();
        e.stopPropagation();

        let html = '<p>My test post content.</p>';
        api.posts.add(
            { title: 'My Test API Post', html },
            { source: 'html' }
        );
    });
}

In theme gulpfile.js I’ve added custom.js file to be compiled/minified to main.min.js

function js(done) {
    pump([
        src([
            'assets/js/lib/*.js',
            'assets/js/main.js',
            'assets/js/custom.js',
        ], { sourcemaps: true }),
        concat('main.min.js'),
        uglify(),
        dest('assets/built/', { sourcemaps: '.' },),
        livereload()
    ], handleError(done));
}

The problem is the require function (require(’@tryghost/admin-api’)) It throws the error ->ReferenceError: require is not defined when the page is loading.

I’ve tried using gulp-requirejs, gulp-browserify, amd-optimize with no luck.

Can someone guide me how to transform that require function into something that works?
Or provide any other solution for making a template post that can be reused for new posts?

Thanks!

2

@mazurchevici the Admin API is not (and should never be) usable in the browser in this way. By bundling the file and including your credentials like that in your theme code you’re giving complete admin control over your whole site to anyone who visits it.

The Admin API package is meant for server-side use only. To do what you want to achieve you would create a small server-side app and host it separately outside of Ghost, that way your admin credentials are not public anywhere and you can restrict it’s usage to the single, controlled, post creation flow. Once you have it hosted somewhere you can then add a form to your site that submits to your server-side app, no client-side JS needed unless you want to get fancier with your form behaviour.

2 Likes