I just install laravel-horizon and already tested using it and everything is okay , however I don't know how to edit laravel horizon view ,
Above is the overview of my laravel-horizon , anyone can help me how to edit this ?
because it seems that laravel using vue js for this and i'm not really familiar
You can find the files that are used to build the frontend vue app in the /vendor/laravel/horizon/resources folder.
The page templates are part of the vue components (.vue files) that are found within the assets/js/pages folder. The css is built from sass files found in assets/sass.
You may be able to make superficial changes to the above files without any vue knowledge, however doing some reading up on how vue components are structured and other vue basics will definitely help.
After you make changes you will need to build the app.
There are build scripts included in the horizon package (check the package.json file).
These scripts will update the files that are included in public/vendor/horizon with the built files.
It would be up to you how you choose to track the changes you make, but I would avoid editing the files within /vendor/laravel/horizon directly, but rather fork it and import it in as your own package, or edit and build the frontend files separately to include within your project.
Related
I am creating a custom laravel packages for inside company usage and I am trying to figure out how to work with the assets that this package requires.
I have src/resources/js where I have multiple JS and CSS files. I'm want to run npm run watch while developing the package so I could see the changes. After the patch/update is done I want to run npm run production that would save these files in src/dist where user can publish these to their public directory (if wanted) with this command in my serviceProvider:
protected function registerAssets() {
$this->publishes([
__DIR__ . '/dist/' => public_path('/public/vendor/myPackage'),
], 'public');
}
Now my question is how do I structure my webpack and my blade views to work with my logic so while running npm run watch the mix() function in my blade will load the assets from one directory and if I publish my package it will the assets from another directory?
Do I understand the logic correctly for package development with the assets?
When you do npm run watch the view will get them from the same path, but it will just change their hash, so the cache can be removed. I think after you prepare them for production/dist use there won't be a need to use mix() anymore, because your package or the project using the package won't be recompiling them. For example when you add bootstrap.js to your project you just load the asset whenever is needed and you don't compile it.
When you publish or release you package, I think your views should be using the dist folder assets and while you develop it you should use mix. If the project using your package needs some asset in their own view, it should figure out the path for the dist published directory. You can also make your package configurable for where the assets are published and from where your views can load them. Another option would be to make a wrapper of the mix() function and also load assets depending on specific configuration. I hope this gives you some ideas on how to proceed depending on how the package will be used by others.
I am building an an app inside a Laravel project using Vue components. The blade layout reads off of the bundled app.js so I was wondering when using frameworks like Vue and React, are the files even necessary other than just being there for the bundle process? Like what I had actually removed the .vue files I have (components) -- would it still work since it's reading off the bundled source file?
.vue files are source files, and should therefore be in source control all the time. When it is compiled (using vue-cli for instance), a .js file will come out of it and that is what the browser needs.
So yes for production environments you can remove the .vue files since you only need the bundled and compiled code.
Shahzaib here, coming to you for a bit of help !
I'm still new in the Shopify and liquid stuff but i'm getting there.
I'm cutrently trying to minify a scss.liquid file on Shopify, usually when I try to do that with a css file, I use an online minifier, exept that, apprently the scss.liquid format is not properly handled. Every time I try to minify it, my site crash ?
Do you guys have something to recommand regarding minifying a scss.liquid file ?
thanks in advance,
regards, Shahzaib.
I recommend setting up a gulp task to do this. This will help simplify your SCSS files into individual files for whatever they style. Also, you won't be edited your theme's default theme.scss.liquid file, so it is easier to overwrite default styles, and you know exactly which styling is yours vs the theme's.
To setup a gulp task, you will need to install node.js and gulp. I recommend using npm for this. Here is a good introduction tutorial to this which you'll need to adapt a bit to work with your Shopify file structure. For example, I recommend adding a src directory for your custom .scss files, and compiling them into one single file in the assets directory, instead of working directly in the theme.scss.liquid file.
https://css-tricks.com/gulp-for-beginners/
Once you have completed those instructions, make sure to add node_modules to your .gitignore file before committing.
Next, setup your project to use themekit. https://shopify.github.io/themekit/ , and have your gulp task run on save of the file. This will compiling your src files into a single file in the assets directory which will then be uploaded to your store by themekit.
Hope this helps!
I'd second than10's answer, and add that if minification of static assets is going to be part of your theme development workflow, use gulp.js running locally with something like gulp-shopify-upload watching your changes and pushing them up to your store:
https://www.npmjs.com/package/gulp-shopify-upload
See basic usage in particular.
Please am new to programming and am trying to build my first mobile app. the question is do i need the phonegap index.js file, cant i just write my code without it like normal jQuery code in a website? I don't really understand how to put the code in the index.js file.The code is very basic, nothing complicated. Thank you
#ifeoluwa king,
only two files are needed to produce for Phonegap Build or Phonegap CLI. The two files are:
index.html
config.xml
The third file required file, which must be include in the index.html, is phonegap.js. With Phonegap Build, the system automatically provides the file. With Phonegap CLI, I have no experience with this, but according to this blog post it has been added to your bundle. In addition, you NEED TO SWITCH THE NAME to cordova.js - Again, read the blog post for details.
Appended 2015/09/02
On the original question, index.js is NOT needed. The file is created as a default; other possible names include, default.js and app.js.
I am writing a joomla componenet but it has many folders and sql tables. I don't prefere to make the package manually. Is there any know extension to make me able to extract my component as a zip file to make it installable.
I'm so confused. Why would you need an extension to compile your component? By the sounds of thing, you have simply started editing a pre-made component.
You should have started with the folder and file stricture when you first started building the component.
Create 2 folders:
admin
site
Put all backend end related folder inside the admin folder, and all frontend related folders inside the site folder.
Then edit your XML file accordingly to it points to the correct folders
There is a third-party component: http://joomlatoys.com/index.php/toys/jtbuilder which can package the selected extensions and generate an installable archive for you.