{"id":360,"date":"2019-08-25T18:11:44","date_gmt":"2019-08-25T18:11:44","guid":{"rendered":"http:\/\/codeinnovers.com\/blog\/?p=360"},"modified":"2019-08-27T11:43:07","modified_gmt":"2019-08-27T11:43:07","slug":"create-package-in-bagisto","status":"publish","type":"post","link":"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/","title":{"rendered":"How to create package in Bagisto"},"content":{"rendered":"<h1 style=\"text-align: center;\">How to create package in Bagisto<\/h1>\n<p><a href=\"http:\/\/bagisto.com\">Bagisto<\/a> is an open source e-commerce based on <a href=\"https:\/\/laravel.com\/\">Laravel<\/a> and combined with the power of vue js which makes it fast, scalable and seo-freindly. Today in our How To&#8217;s series we are going to learn on how to create\u00a0 package in bagisto. Since Bagisto is based on laravel, standard way to create package for laravel and bagisto is almost same. In futture posts we will be sharing articles to create package to features to Bagisto, let&#8217;s start with creating a package. This tutorial assumes you already have a bagisto installation on your server or in your local environment. Detailed infomation to install bagisto is available on\u00a0<a href=\"https:\/\/devdocs.bagisto.com\/\">Bagisto Documentation website.<\/a><\/p>\n<p>1- Create a directory named\u00a0 &#8220;<strong>Mega<\/strong>&#8221; inside the <strong>packages<\/strong> folder in root of the bagisto installation. <strong>packages<\/strong> directory is the container of all namespaces of packages. In vanilla installation of Bagisto, you will get the directory names <strong>Webkul <\/strong> which contains the packages for bagisto. Namespace or vendor name is a group of entities or classes that are separated from classes of other namespaces with same name so they don&#8217;t conflict. Every extension or package that we will develop should be kept in same namespace to avoid the conflict between classes with same name. inside Mega directory create a directory named HelloWorld. HelloWorld is the name of the package that we will be building.<\/p>\n<p>2-\u00a0 Inside the package directory <strong>HelloWorld<\/strong>\u00a0 create a file named <strong><em>package.json,<\/em><\/strong> <em>this package.json <\/em>file will be used to manage the\u00a0javascript dependencies. We will learn about the javascript dependencies in furture posts. Also create a file named <strong>composer.json <\/strong>this file fill be used to manage the php dependencies. We will learn about the contents of this file<\/p>\n<p>3- Create folder\u00a0 named <strong>src <\/strong>in HelloWorld folder. This src folder will hold most of our code for the package.<\/p>\n<p>4- Now we will start with registering our package so that laravel loads it during bootstrapping. For this we need to create a service provider for our package. This service provider will be used later to register our package. Its a standard practice to name your provider in format\u00a0 like packageNameServiceProvider.php. For our package we will name it has <strong>HelloWorldServiceProvider<\/strong>.php<\/p>\n<p>5- Create a directory named\u00a0 <strong>Providers <\/strong>inside src directory and create file named <strong>HelloWorldServiceProvider.php<\/strong> .This file will contain two methods named as <strong>boot()<\/strong> and register() .We will the usage of these methods later in this article.<\/p>\n<p>6- Now we will register our package. To do this go to <strong>app.php <\/strong>file inside config folder in root of bagisto installation. We will add our <strong>HelloWorldServiceProvider<\/strong> in this <strong>app.php<\/strong> file to <strong>providers<\/strong> array. To do this add below code to <strong>$providers<\/strong> array like below:<br \/>\n<code><br \/>\n$providers = [<\/code><br \/>\n&#8216;Mega\\HelloWorld\\Providers\\HelloWorldServiceProvider::class<br \/>\n]<br \/>\nAfter adding your service provider , it will look like as shown in below image:<\/p>\n<p><a href=\"http:\/\/codeinnovers.com\/blog\/wp-content\/uploads\/2019\/08\/hello-world-sp.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-364 size-full\" src=\"http:\/\/codeinnovers.com\/blog\/wp-content\/uploads\/2019\/08\/hello-world-sp.png\" alt=\"hello world service provider- how to create package in bagisto\" width=\"595\" height=\"478\" srcset=\"https:\/\/codeinnovers.com\/blog\/wp-content\/uploads\/2019\/08\/hello-world-sp.png 595w, https:\/\/codeinnovers.com\/blog\/wp-content\/uploads\/2019\/08\/hello-world-sp-300x241.png 300w\" sizes=\"(max-width: 595px) 100vw, 595px\" \/><\/a><\/p>\n<p>7- Now we will add our package to <strong>composer.json<\/strong> which is located in root of bagisto installation. We need to follow this step to enable auto-loading of our package in psr-4. We need to below code to composer.json<\/p>\n<pre class=\"highlight\"><code>\"psr-4\": {\r\n    \"Mega\\\\HelloWorld\\\\\": \"packages\/Mega\/HelloWorld\"\r\n}<\/code><\/pre>\n<p>after adding this, our composer.json will look like below:<\/p>\n<p><a href=\"http:\/\/codeinnovers.com\/blog\/wp-content\/uploads\/2019\/08\/hello-world-composer-json.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-365 size-full\" src=\"http:\/\/codeinnovers.com\/blog\/wp-content\/uploads\/2019\/08\/hello-world-composer-json.png\" alt=\"create package in bagisto\" width=\"796\" height=\"449\" srcset=\"https:\/\/codeinnovers.com\/blog\/wp-content\/uploads\/2019\/08\/hello-world-composer-json.png 796w, https:\/\/codeinnovers.com\/blog\/wp-content\/uploads\/2019\/08\/hello-world-composer-json-300x169.png 300w, https:\/\/codeinnovers.com\/blog\/wp-content\/uploads\/2019\/08\/hello-world-composer-json-768x433.png 768w\" sizes=\"(max-width: 796px) 100vw, 796px\" \/><\/a><br \/>\n8- Now our package is registered and we have added our package in <strong>composer.json<\/strong> .Now let&#8217;s add some routes in our package which will redirect request to controller. To begin with routing we need to load our routes file and then we will add routes to our routes file. Let&#8217;s begin with routing.<\/p>\n<p>9-\u00a0 Open HelloWorldServiceProvider.php and add below code in Router() method<\/p>\n<p><code>this-&gt;loadRoutesFrom(__DIR__ . '\/..\/Routes\/routes.php');<\/code><\/p>\n<p>This path can be any path. Just make sure you create the routes.php file in the same path as the path we pass in <code>loadRoutesFrom<\/code> method<\/p>\n<p>to render a page in browser we need a view file in our package. For this we need to load our view files like we loaded route file. We will use <code>loadViewsFrom<\/code> method. The code will look like below:<br \/>\n<code>$this-&gt;loadViewsFrom(__DIR__ . '\/..\/Resources\/views', 'megaHelloWorld');<\/code><\/p>\n<p>Here <code>megaHelloWorld<\/code> is the namespace of our package view. We will use this name to mention or use our view files, that we will see in the routes file.<\/p>\n<p>Now let&#8217;s add code in routes.php file<br \/>\n<code><br \/>\nRoute::view('\/hello-world', 'megaHelloWorld::index.helloworld');<br \/>\n<\/code><br \/>\nview() method of route accepts 2 parameters, one is URL Route and another is view path file that will be returned for the URL passed as first parameter. In megaHelloWorld::helloworld, megaHelloWorld is the same code that we passed as the second parameter in the method that we called in service provider i.e. loadViewsFrom(). helloworld is the name of view file and laravel appends blade.php when loading it. So for megaHelloWorld::helloworld we will create a helloworld.blade.php file in view directory that we passed in loadViewsFrom method.<br \/>\nApart from view(), we can use Route::get(), Route::post() to use controller.<\/p>\n<p>After updating routes file, we will create a file named helloworld.blade.php in path <strong>packages\/Mega\/HelloWorld\/src\/Resources\/views\/index\/helloworld.blade.php <\/strong>and add below very simple content in this file.<\/p>\n<pre>&lt;h1&gt;Hello World&lt;\/h1&gt;\r\n\r\nNow goto composer.json file of our package and add below code in this file:\r\n<code><\/code><code><\/code><code>\r\n{\r\n    \"name\": \"mega\/helloworld\",\r\n    \"description\": \"Bagisto Hello World\",\r\n    \"authors\": [\r\n        {\r\n            \"name\": \"Team CodeInnovers\",\r\n            \"email\": \"codeinnovers@gmail.com\"\r\n        }\r\n    ],\r\n    \"minimum-stability\": \"stable\",\r\n    \"require\": {},\r\n    \"autoload\": {\r\n        \"psr-4\": {\r\n            \"Mega\\\\HelloWorld\\\\\": \"src\/\"\r\n        }\r\n    },\r\n    \"extra\": {\r\n        \"laravel\": {\r\n            \"providers\": [\r\n                \"Mega\\\\HelloWorld\\\\Providers\\\\HelloWorldServiceProvider\"\r\n            ]\r\n        }\r\n    }\r\n}\r\n<\/code><\/pre>\n<p>After the above code is added run below code in your bagisto root.<br \/>\n<code>php composer dump-autoload<\/code><\/p>\n<p>now open your browser and hit the below URL<br \/>\n<code>http:\/\/localhost\/bagisto\/public\/hello-world<\/code><br \/>\nand you will see the content of file helloworld.blade.php<\/p>\n<p>This is all for today&#8217;s article. We have understood the basic steps about how to create package in bagisto.\u00a0 Package code for today&#8217;s article is available to download on github. You may download the code from https:\/\/github.com\/codeinnovers\/bagisto-helloworld<\/p>\n<p>Please feel free to connect with us in case of you have any query or doubt. Since bagisto community is very supportive you may join\u00a0<a href=\"https:\/\/www.facebook.com\/groups\/bagisto\/\">facebook group<\/a> and <a href=\"https:\/\/forums.bagisto.com\/\">bagisto forum.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to create package in Bagisto Bagisto is an open source e-commerce based on Laravel and combined with the power of vue js which makes it fast, scalable and seo-freindly. Today in our How To&#8217;s series we are going to learn on how to create\u00a0 package in bagisto. Since Bagisto is based on laravel, standard [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[145,4],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v19.5 (Yoast SEO v19.10) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create package in Bagisto - CodeInnovers<\/title>\n<meta name=\"description\" content=\"we will see how we can create package in bagisto. This package development will help us to add new features and customization in a scalable way.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create package in Bagisto\" \/>\n<meta property=\"og:description\" content=\"we will see how we can create package in bagisto. This package development will help us to add new features and customization in a scalable way.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeInnovers\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-25T18:11:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-27T11:43:07+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/codeinnovers.com\/blog\/wp-content\/uploads\/2019\/08\/hello-world-sp.png\" \/>\n<meta name=\"author\" content=\"Sam Parker\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sam Parker\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/\",\"url\":\"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/\",\"name\":\"How to create package in Bagisto - CodeInnovers\",\"isPartOf\":{\"@id\":\"https:\/\/codeinnovers.com\/blog\/#website\"},\"datePublished\":\"2019-08-25T18:11:44+00:00\",\"dateModified\":\"2019-08-27T11:43:07+00:00\",\"author\":{\"@id\":\"https:\/\/codeinnovers.com\/blog\/#\/schema\/person\/bbe49f6f2028b54a87fabd0b6dd3a3f8\"},\"description\":\"we will see how we can create package in bagisto. This package development will help us to add new features and customization in a scalable way.\",\"breadcrumb\":{\"@id\":\"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codeinnovers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create package in Bagisto\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codeinnovers.com\/blog\/#website\",\"url\":\"https:\/\/codeinnovers.com\/blog\/\",\"name\":\"CodeInnovers\",\"description\":\"Developing the impossible\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codeinnovers.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codeinnovers.com\/blog\/#\/schema\/person\/bbe49f6f2028b54a87fabd0b6dd3a3f8\",\"name\":\"Sam Parker\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codeinnovers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/10f48f28ca8c9e285071c94e88696979?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/10f48f28ca8c9e285071c94e88696979?s=96&d=mm&r=g\",\"caption\":\"Sam Parker\"},\"url\":\"https:\/\/codeinnovers.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to create package in Bagisto - CodeInnovers","description":"we will see how we can create package in bagisto. This package development will help us to add new features and customization in a scalable way.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/","og_locale":"en_US","og_type":"article","og_title":"How to create package in Bagisto","og_description":"we will see how we can create package in bagisto. This package development will help us to add new features and customization in a scalable way.","og_url":"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/","og_site_name":"CodeInnovers","article_published_time":"2019-08-25T18:11:44+00:00","article_modified_time":"2019-08-27T11:43:07+00:00","og_image":[{"url":"http:\/\/codeinnovers.com\/blog\/wp-content\/uploads\/2019\/08\/hello-world-sp.png"}],"author":"Sam Parker","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sam Parker","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/","url":"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/","name":"How to create package in Bagisto - CodeInnovers","isPartOf":{"@id":"https:\/\/codeinnovers.com\/blog\/#website"},"datePublished":"2019-08-25T18:11:44+00:00","dateModified":"2019-08-27T11:43:07+00:00","author":{"@id":"https:\/\/codeinnovers.com\/blog\/#\/schema\/person\/bbe49f6f2028b54a87fabd0b6dd3a3f8"},"description":"we will see how we can create package in bagisto. This package development will help us to add new features and customization in a scalable way.","breadcrumb":{"@id":"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/codeinnovers.com\/blog\/create-package-in-bagisto\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeinnovers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create package in Bagisto"}]},{"@type":"WebSite","@id":"https:\/\/codeinnovers.com\/blog\/#website","url":"https:\/\/codeinnovers.com\/blog\/","name":"CodeInnovers","description":"Developing the impossible","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeinnovers.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codeinnovers.com\/blog\/#\/schema\/person\/bbe49f6f2028b54a87fabd0b6dd3a3f8","name":"Sam Parker","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeinnovers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/10f48f28ca8c9e285071c94e88696979?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/10f48f28ca8c9e285071c94e88696979?s=96&d=mm&r=g","caption":"Sam Parker"},"url":"https:\/\/codeinnovers.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/posts\/360"}],"collection":[{"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/comments?post=360"}],"version-history":[{"count":10,"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/posts\/360\/revisions"}],"predecessor-version":[{"id":372,"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/posts\/360\/revisions\/372"}],"wp:attachment":[{"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/media?parent=360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/categories?post=360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinnovers.com\/blog\/wp-json\/wp\/v2\/tags?post=360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}