connecteev

@robstar @dunsti @mthomas Thank you all. I got this to finally work. I need to add the import to my app.scss file, and also reference app.js and app.css in my welcome.blade.php file.

Appreciate ya'll jumping in to help.

@YITZCHOK - @yitzchok I dont think the import is the problem. However, adding ~ to the import doesnt help either:

Failed to load resource: the server responded with a status of 404 (Not Found) common.css:1 

@mthomas @robstar

I still haven't been able to get this to work. By the way, I did watch the 'component-related' videos at https://laracasts.com/series/learn-vue-2-step-by-step

Here is my public repo with the 2 commits of what I have tried: https://gitlab.com/connecteev/laravel_vodal_test

I ran this in Terminal 1: npm i -S vodal npm install npm run watch

I ran this in Terminal 2: php artisan serve This started serving at http://127.0.0.1:8000/ Then opened up a browser to go to http://127.0.0.1:8000/

Attempt 1: https://gitlab.com/connecteev/laravel_vodal_test/commit/d906e3c01e16dc74b8e5347808de90c1d2ef2639

This didnt work, and I then tried what I found here (for Attempt #2 below) https://vuejs.org/v2/guide/components-registration.html

Attempt 2: https://gitlab.com/connecteev/laravel_vodal_test/commit/7ee55b7d218d021729047a11ee229a3e3ce81460

No luck. All I see is https://prnt.sc/npion4

What am I missing?

@ROBSTAR - @mthomas @robstar I did read the README at https://github.com/chenjiahan/vodal

What I don't understand is, which files need to be changed? Where does each of these go?

<vodal :show="show" animation="rotate" @hide="show = false">
    <div>A vue modal with animations.</div>
</vodal>

import Vue from 'vue';
import Vodal from 'vodal';

Vue.component(Vodal.name, Vodal);

export default {
  name: 'app',
    
  data() {
    return {
      show: false
    }
  }
}

// include animation styles
@import "vodal/common.css";
@import "vodal/rotate.css";

I tried different permutations, but never got a single one to work. I ended up frustrated and hence the question.

@martinbean @mhdmada Not sure if you tried this, but none of these solutions worked

@PROGRAMMER111 - vue's already installed with Laravel. I'm trying to install a vue package.

Specifically, I am looking to include https://github.com/chenjiahan/vodal into my Laravel app. The instructions in the https://github.com/chenjiahan/vodal package aren't very useful.

Is there a guide for this, somewhere? I need to know what files to change to get this to work.

Thanks!

Turns out the answer is that you have to use the blade syntax, like {{ $dir }}

Thanks @bobbybouwmann

1. your suggestion for the echo on my local Macbook worked: echo /Users/kp/Code/_tmpbuilds/build_ {{ date('YmdHis') }}

Just is a bit strange because it worked fine (on a remote server) with echo "/Users/kp/Code/_tmpbuilds/build_" . date('YmdHis'); I guess different OS?

1. Focusing on running this on my local Mac again, How do I set variables? My point with @ setup was that the variables set there are not visible within the @ task

@setup
    $dir = "/Users/kunalpunjabi/Code/_tmpbuilds/build_" . date('YmdHis')
@endsetup

@story('local')
    clone_repository
@endstory

@task('clone_repository')
    echo "mydir:" $dir
    echo "-- Done --"
@endtask

THis outputs:

$ envoy run local
[localhost]: mydir:
[localhost]: -- Done --

Can Envoy be used for a local build script instead of a remote server deploy script? ANy examples? I haven't been able to get this to work for some reason or another....variables dont get recognized, and @setup never gets called.

@servers(['web' => 'localhost'])

@setup
    $dir = "/Users/kp/Code/_tmpbuilds/build_" . date('YmdHis')
@endsetup

@story('local')
    clone_repository
@endstory

@task('clone_repository')
    echo "/Users/kp/Code/_tmpbuilds/build_" . date('YmdHis');

    echo "-- Done --"
@endtask

Thanks for the reply. I am not expecting this whole thing to be readily available, but I was hoping for a few of the pieces to be. For example, #1, #2 and #3 dont seem THAT far-fetched imo to be a package. Would you agree?

I am looking for code (ideally 1-2 packages that work well together) that Onboards new users. The onboarding flow will likely be used to get the user to fill out a profile (the flow needs to be broken into multiple steps / questions).

My requirements:

1. The first time the user creates an account or logs in, they are taken to step 1 of the onboarding flow. The user CANNOT get to the core application (which they want to do) until they complete the onboarding flow.

2. Let's say the onboarding flow has 5 steps. If the user fills out steps 1, 2, the data gets saved  (via Ajax calls). If the user then abandons at step 3, the data persists in the database. The next time the user comes to the app and logs in, they are taken to step 3, and have to fill out steps 3, 4, 5 before the onboarding flow is done and the user is allowed to access the app.

3. Technical requirements:
The back-end needs to be in Laravel.
The front-end of the flow needs to be very quick to load, ideally a Single-page-application written in Vue.js (maybe using other libraries like Vuetify). Ideally, the front-end makes API calls to the back-end (ie there is good code separation between the front-end and the back-end)

4. (Nice to have, definitely not required) A "Lazy" onboarding flow: An option to customize the onboarding flow for users that are NOT logged in. At each step of the flow, the data gets stored in local storage, and only after they finish step 5 of the onboarding flow, do they create an account, and all the data from the onboarding flow gets written to the database. ```

Does something like this exist out there, or have you found a way to make the above work? Links to functional code (even if 60% to 70% functional based on what I need) would be great and a huge time-saver. Thank you all...

thanks for the reply. Doesn't work with mangle: true

While terser: {} runs, it doesn't seem to do anything:

1. Remove comments from js
2. Minify JS

I ran this beforehand: npm install terser-webpack-plugin --save-dev

My config:

mix.options({
    terser: {}, 
});

Btw, I am aware of https://github.com/spatie/laravel-mix-purgecss but am looking for a more comprehensive solution

Do any folks have experience with production deploys? I'd like to do the following on production, to discourage people from copying the front end source code, and also to keep the file sizes as tight as possible. Here are my requirements:

CSS (both inline CSS as well as CSS in files included using )

1. Strip all whitespace and comments from my CSS
2. Change all CSS rules and classnames from clean names to ugly names, like ".testimonials_content" to ".xhdy3672" (this would need to modify the CSS rules in the HTML / Blade templates too)
3. (If possible) remove unused CSS rules that are not referenced

JS (both inline JS in HTML using tags as well as JS in files included using >)

1. Strip all whitespace and comments from my JS
2. Change all JS variables and function names from clean names to ugly names, like "SwipeSlide()" to "xswjnd28()" (this would need to modify the JS rules in the HTML / Blade templates too)
3. (If possible) remove unused JS code that is not referenced.

I'm currently using Laravel Mix (wrapper for Webpack). My webpack.mix.js file looks like this:

const mix = require('laravel-mix');
require('laravel-mix-tailwind');

mix.options({
/*
    purifyCss: true // removes unused CSS, Buggy. DO NOT USE
*/
    clearConsole: true, // in watch mode, clears console after every build

});

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

I'm not very familiar with Webpack, but in my experience, using Laravel Mix with 'purifyCss=true' did not work. I do need something that would hit all of the use cases above 9for both the CSS and JS). Is this possible with Laravel Mix, and what have you ben doing to solve for this?

I have an old app I'm trying to migrate from Cakephp 1.3 to Laravel 5.7 Has anyone does this before, and what's the quickest and most efficient way to do this?

I meant things like Bower and other build tools.

What are your favorite front-end tools for rapid development + production use?

Have tried everything in this thread. No luck.

Keep seeing this error: cURL error 77: error setting certificate verify locations: CAfile: "C:\xampp\sendmail\cacert.pem CApath: none (see http://curl.haxx.se/libcurl/c/libcurl-errors.html)

@jimmck @fetch404 Thanks...I figured out that the problem was with the max connections. You cannot have more than a certain number of laracast tabs open at the same time....so limiting the number of connections helps.

I was under the impression that the videos could be downloaded after upgrading my membership...but whenever I try to do that, it says, "waiting for available socket"....anyone facing this issue? It would suck if we're being rate limited AFTER paying for a membership.

@toniperic See "Why isn't esoTalk being actively developed?" http://esotalk.org/blog/faq.html

@JeffreyWay Really liking what you've done with https://laracasts.com/discuss, esp the enhancements (leaderboard, making it responsive, etc). Any idea when this code is going to be open sourced?

1. esotalk is dead,
2. Flarum (https://github.com/flarum/core) has a gorgeous UI but still early in development and uses ember, which I want to stay away from.
3. FluxBB 2 is a joke which leaves no good laravel-based open source forum out there.