Use Openapi Generator SDK for Javascript within Nuxt.Js Project

Basil — Mon, 26 Jul 2021 09:40:18 +0000

Its very common to use an OpenApi SDK Client directly in your project - but the SDK Generators is mainly made to publish to generated code as a library on f.e. GitHub. Therefore the following steps will help you to install and use the generated SDK directly within your Nuxt.Js app:

1) Run the Openapi-generator-cli command inside your project

openapi-generator-cli generate -i https://path/to/openapi.json -g javascript -o oa/

2) Since that generated SDK module requires superagent install that dependency in your project:

yarn add superagent

3) Generate a NuxtJS plugin file which helps to include the library and also makes it more easy to access in your app. Create ~/plugins/oa.js

export default ({ app }, inject) => {
  const WebsiteSDK = require('~/oa/src/index.js');

  const defaultClient = WebsiteSDK.ApiClient.instance;
  const bearerAuth = defaultClient.authentications['bearerAuth'];
  bearerAuth.accessToken = "YOUR ACCESS TOKEN"

  inject('sdk', WebsiteSDK)
}

This will make your SDK client available in nuxt.js as this.$sdk

4) Add the plugin in nuxt.config.js

plugins: [
  { src: '~/plugins/oa.js', mode: 'client'},
],

5) Now use your new plugin to make API calls.

const api = this.$sdk.<TheApi>
api.<UniqueOperationIdFromOpenApi>({options}, (error, data, response) => {
      console.log(error, data, response)
});

ps: Maybe there are better solutions, its more an a note for myself - maybe helps others too. Improvements are welcome!

Compile SCSS and JS inside a PHP Project

Basil — Fri, 20 Nov 2020 08:19:47 +0000

There are still Projects which do not utilize all those fancy JavaScript Frameworks and their environments. No NPM, no YARN, just PHP (and HTML, CSS)

But of course, SCSS might be used and some JavaScript parts you'd like to compile into minified files.

How to compile your SCSS and JS files? Install a grunt workflow, Gulp or Webpack? You could...

... but you don't need to mix up your well organized PHP project with Node stuff. Its possible to just install

unglue-workflow / client

The client binary which sends the data to the server and creates the output from the API response.

and compile right from your console, no need for a package.json file (which is instantly outdated anyhow) inside your PHP Application.

And this is why we cam up with unglue.io an API based compile service for JS and SCSS.

Forget the hassle of installing Node on your local system just to compile some SCSS files and minify/uglify JS code. A composer package which is seamless installed along with other depencies does all the job.

You can either host your own API (there is a docker server image or just install the node package somewhere) or just use the public API we offer, its completely free and open source.

Using Unglue

In order to use unglue you just need 3 things:

1) Install the composer package unglue/client (composer require --dev unglue/client).

2) Create an .unglue file in the directory you would like to have your compiled files and let unglue know what to compile:

{
    "css": [
          "../scss/main.scss"
    ],
    "js": [
        "../js/main.js"
    ]
}

3) And run the compile or watch command right from your vendor folder: ./vendor/bin/unglue watch

If you are running your own server (locally or on a public URL) use ./vendor/bin/unglue watch --server=yourunglueserver.com

For the full documentation and usage see unglue.io

This is just another option to handle your frontend code workflow, the common workflows are not wrong, its just: Frontend workflow done different