I habitually write a swagger file for the API I develop to facilitate front-end connection, but because these files are stored in my personal swagger account and will be limited by the free version, plus I was just discussing with the PM how to To maintain our files, I started to deploy swagger myself to the company management backend.
Advantages of doing this:
(1) The backend can be edited
(2) The files belong to the company and there is no additional charge
(3) git version control, you can clearly know who has changed what
Implementation
Install
npm install swagger-ui
setting
step1: Store yaml file
Because this swagger is open to the outside world, it needs to put the file in the public folder. Because the company has multiple products, the path I opened is: public/documents/aaa-api.yaml, public/ documents/bbb-api.yaml
step2: js file configuration file
Add the js settings used for each yaml file in the resource/js folder:
aaa-swagger.yaml
import SwaggerUI from “swagger-ui”;
import “swagger-ui/dist/swagger-ui.css”;
SwaggerUI(
dom_id: “#swagger-api”,
url: ”
);
bbb-swagger.yaml
import SwaggerUI from “swagger-ui”;
import “swagger-ui/dist/swagger-ui.css”;
SwaggerUI(
dom_id: “#swagger-api”,
url: ”
);
step3: webpack
setting
To the webpack.mix.js file, add the following
mix.js(“resources/js/aaa-swagger.js”, “public/js”)
.js(“resources/js/bbb-swagger.js”, “public/js”)
run
npm run dev
Package the js in the resource/js folder into the public/js folder, so that our html file can load them, and the js behind it will help us load the screen into a certain div according to the configuration file.
step4: Write blade template
Added swagger.blade.php
Because the style of each API file is the same, I only open one blade, and the file location that needs to be loaded is passed through the API route.
step5: route
Add the following routes to web.php:
Route::group([
‘prefix’ => ‘documents’,
‘middleware’ => [‘auth:sanctum’]
], function()
Route::get(‘/aaa’, function ()
return view(‘swagger’)->with(‘fileName’, ‘aaa-swagger.js’);
); Route::get(‘/bbb’, function ()
return view(‘swagger’)->with(‘fileName’, ‘bbb-swagger.js’);
););
step6: open cors
step7: run
composer artisan optimize
Then go to the route you set and you can see the results.
