gradosevic / shortener-frank

This Laravel package allows you to shorten a URL with Vue.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

shortener-frank

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.

Basic Docs

Installation

Laravel Exceptions requires PHP 7.1-7.3. This particular version supports Laravel 5.5-5.8 and 6 only.

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

Via Composer

$ composer require muhamed-didovic/shortener-frank

Once installed, if you are not using automatic package discovery, 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
]    

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 links or URLs should be stored
     */
    'table'  => 'links',

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

    /*
     * Routes used in 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:

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:

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

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

Usage

In order to use this package in your application there are 4 routes in web.php file that you need to get familiar

Below is web.php file where are the 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 more 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 ('/') is default endpoint option and is used for Vue.js to show view.

Important Node

Because there is ('/') route to show view with the form element and probably it is used already in your project so you can change in shortener.php config file that option with endpoint that you want or you can comment/remove your ('/') route

Another info default table name is ('links') which can be changed in shortener.php config file nad also there is ('URL') option, it should be used for redirecting,

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.

About

This Laravel package allows you to shorten a URL with Vue.js

License:MIT License


Languages

Language:JavaScript 93.3%Language:PHP 5.0%Language:Vue 0.9%Language:CSS 0.7%Language:HTML 0.1%