muhamed-didovic/shortener

Shortener for Laravel with Vue.js SPA app

1.1.5 2020-07-02 23:09 UTC

This package is auto-updated.

Last update: 2024-04-29 04:19:59 UTC


README

Latest Version on Packagist Software License Build Status Coverage Status Quality Score StyleCI Total Downloads

This Laravel package allows you to shorten a URL, it comes also with frontend part which is done in vue.js and vuex. You can publish all files like: views, config, migrations for frontend you can publish js and css file and adjust them accordigly.

usage.gif

Basic Docs

Installation

Laravel Shortener requires PHP 7.1-7.4. This particular version supports Laravel 5.5-5.8, 6 and 7 only.

To get the latest version, simply require the project using Composer:

Via Composer

$ composer require muhamed-didovic/shortener

Once installed, if you are NOT using automatic package discovery (Laravel 5.4 and below), then you need to register the MuhamedDidovic\Shortener\ShortenerServiceProvider service provider in your config/app.php like this:

'providers' => [
    ...
    MuhamedDidovic\Shortener\ShortenerServiceProvider::class,
]    

You can also optionally alias our facade:

'aliases' => [
    ...
    'Shortener' => MuhamedDidovic\Shortener\Facades\Shortener::class,
]    

Usage and next steps

After you install the package, you need to run bellow commands in order to make it working, after that I'll give more info about configuration and usage.

First step, run command which is responsible for publishing js and css into resources and public folder.

php artisan vendor:publish --provider="MuhamedDidovic\Shortener\ShortenerServiceProvider" --tag="shortener::assets"

Second step, migrate DB and get the ('links') table (this can be changed in ('shortener.php') config file) where URLs will be stored:

php artisan migrate

Third step, check your ('.env') file and check ('APP_URL') option, this is used by default for shortend url, also you can change or override that in ('shortener.php') config file

Fourth step, in order to serve view file and Vue.js all together, you'll need a route, by default that route is ('{any?}'), so just type any URL that you don't have in your routes

Configuration

Laravel Shortener package supports optional configuration.

You can publish the migration with:

php artisan vendor:publish --provider="MuhamedDidovic\Shortener\ShortenerServiceProvider" --tag="shortener::migrations"

After the migration has been published you can create the media-table by running the migrations:

php artisan migrate

You can publish the config-file with:

php artisan vendor:publish --provider="MuhamedDidovic\Shortener\ShortenerServiceProvider" --tag="shortener::config"

This is the contents of the published config file:

return [
    /*
     * Name of table where the links or the URLs should be stored
     */
    'table'  => 'links',

    /*
     * Url that should be used with the shortened string
     */
    'url'    => env('APP_URL', 'http://localhost'),

    /*
     * Routes used in the package
     */
    'routes' => [
        /*
         * Route used to store url with post request
         */
        'post_short_route' => 'short',

        /*
         * Route to get shortend url with get request
         */
        'get_short_route'  => 'short',

        /*
         * Route to get status of url provided with get request
         */
        'get_stats_route'  => 'stats',

        /*
         * Route to serve Vue instance
         */
        'vue_route'        => '{any?}',
    ]
];

Frontend Configuration

1st step

you need to publish frontend files(js, css and view) first:

php artisan vendor:publish --provider="MuhamedDidovic\Shortener\ShortenerServiceProvider" --tag="shortener::views"
php artisan vendor:publish --provider="MuhamedDidovic\Shortener\ShortenerServiceProvider" --tag="shortener::assets"

The first command above is for view file and it will be placed in resources/views/vendor/ folder with the name: shortener.blade.php

It should be like this:

view.png

Second command is publishing js and css into resources and public folder.

This is needed when we make changes to js or css files in resources folder, those files will be bundled and placed inside public folder

js and css files in resources folder should look like this:

resources.png

And the bundled files that are generated from resources folder will be placed in public folder:

public.png

2nd step

you need to install npm dependencies in package.json file

npm install vue-template-compiler@2.6.10 clipboard@1.6.1 pluralize@4.0.0 vue@2.2.6 vue-axios@2.1.4 vue-router@2.3.1 vuex@2.3.1 --save-dev

3rd step

you need to add files to bundle in webpack.mix.js

mix.js('resources/js/shortener.js', 'public/js/shortener.js')
    .sass('resources/sass/shortener.scss', 'public/css/shortener.css');

4th step

run the laravel mix, you can check package.json in scripts part for commands like

npm run dev

or watcher

npm run watch

Available routes and their explanations

This package consists of 4 routes (you don't need to include them into your routes):

Route::group(
    [
        'namespace'  => 'MuhamedDidovic\Shortener\Controllers',
        'middleware' => 'MuhamedDidovic\Shortener\Middleware\ModifiesUrlRequestData',
    ],
    function () {
        //save url
        Route::post(config('shortener.routes.post_short_route'), 'LinkController@store');
        //get url
        Route::get(config('shortener.routes.get_short_route'), 'LinkController@show');
        //get stats
        Route::get(config('shortener.routes.get_stats_route'), 'LinkStatsController@show');
        //ROUTE for vue
        Route::get(config('shortener.routes.vue_route'), 'SinglePageController@show')->where('any', '.*');
    }
);

All endpoints are stored inside of shortener.php config file. First three routes are API based and return JSON results.

First two routes from web.php have ('short') default endpoint option, first one is used to store and shorten URL, second is used to retrieve URL by code what we provide. Third route have ('stats') default endpoint option and is used to get stats for particualar URL.

Last fourth route ('{any?}') is default endpoint option and is used for Vue.js to show the view.

Change log

Please see CHANGELOG for more information on what has changed recently.

Testing

$ composer test

Contributing

Please see CONTRIBUTING and CODE_OF_CONDUCT for details.

Security

If you discover any security related issues, please email muhamed.didovic@gmail.com instead of using the issue tracker.

Credits

License

The MIT License (MIT). Please see License File for more information.