Chapters

48 Chapters | 5:05:52 |

01

Encore, Symfony & API Platform

7:15
02

Installing Vue, Webpack & Eslint

8:57
03

Vue Instance & Dynamic Data

6:10
04

Single File Component

4:17
05

CSS: Styling a Component

4:51
06

data() and Vue Dev Tools

4:28
07

Creating a Child Component

5:09
08

Props: Passing Info into a Child Component

4:49
09

v-bind: Dynamic Attributes

6:39
10

Modular CSS

7:06
11

Webpack dev-server: Faster Updating

6:20
12

HMR: See Changes without Reloading

4:36
13

Organizing into more Components

6:08
14

Aliases

5:05
15

Looping with v-for

7:39
16

v-on & methods: User Interaction

8:33
17

Magic "this" & its Properties

7:29
18

Reactivity

7:55
19

v-if, v-show and Conditional Classes

5:12
20

Computed Properties

5:58
21

Where should a Piece of Data Live?

7:06
22

Communication UP with $emit

5:49
23

Using Shared CSS

5:08
24

Ajax with Axios

5:41
25

The await Keyword

7:34
26

Product Listing Components

8:13
27

Product Details & Smart vs Dumb Components

8:51
28

Loading Component

5:35
29

Dynamic Categories via Ajax

5:30
30

Passing data From the Server to Vue

6:46
31

Reading Server Data & :global Classes

7:18
32

Page Context "Service"

8:12
33

Filtering the Products

4:51
34

Smarter Loading: Ajax status as State

8:00
35

Ajax Services

7:54
36

Skipping Ajax: Sending JSON Straight to Vue

6:37
37

Faking Ajax calls: Reading Synchronously

6:06
38

Passing Props vs Fetching Directly

6:36
39

Hoisting Data Up

6:52
40

The Formidable v-model

7:04
41

Pass Data in a Custom Event & Internal Data

6:41
42

Filtering Products

3:47
43

Async Computed Properties

9:00
44

Debouncing: Data can Hold Anything

4:18
45

Business Logic Helpers

5:57
46

Adding an [x] to our Search Bar

4:19
47

Watchers: The Good, The Bad & The Useful!

6:18
48

Adding a Watcher

5:13

> JavaScript Frameworks & Tools > The Delightful World of Vue

Buy Access to Course

11.

Webpack dev-server: Faster Updating

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Challenge

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

14 Comments

Sort By

Login or Register to join the conversation

Valentin-D 3 years ago edited

Here's a quick fix for those of you using a virtual host:

` // webpack.config.js

.configureDevServerOptions(options => {
    options.proxy = {
        '/': {
            target: 'https://myproject.local',
            changeOrigin: true,
            logLevel: 'debug',
        },
    };
})`

Then run

yarn encore dev-server --host myproject.local
OR
yarn dev-server --host myproject.local

yarn dev-server --host myproject.local --hot

|

weaverryan SFCASTS Valentin-D 3 years ago

Thanks for posting that! The dev server can be a pain when it comes to this host stuff (that's why I show watch more often... even though dev-server is more awesome ;) )

|

davidmintz 3 years ago edited

I am working on a Symfony 6 project and trying to get the Webpack/Encore dev server to use https. I have set it up exactly as indicated at https://symfony.com/doc/current/frontend/encore/dev-server.html#enabling-https-using-the-symfony-web-server, and when I run yarn dev-server, the output is

`yarn dev-server
yarn run v1.22.19
$ encore dev-server
Running webpack-dev-server ...

[webpack-dev-server] SSL certificate: /opt/www/shrinksoffice/node_modules/.cache/webpack-dev-server/server.pem
[webpack-dev-server] Project is running at:
[webpack-dev-server] Loopback: https://localhost:8080/, https://127.0.0.1:8080/
[webpack-dev-server] Content not from webpack is served from '/opt/www/shrinksoffice/public' directory
[webpack-dev-server] 404s will fallback to '/index.html'
DONE Compiled successfully in 1814ms `

which looks about right, doesn't it?

But when I load my app's main page into a browser, there is a CSS-less and JS-less skeleton -- because the output of my twig base template's encore_entry_link_tags() and encore_entry_script_tags() say http (not https), and the debug console says error loading failed for the <script> http://localhost/[etc]. When I do load, e.g., https://localhost:8080/build/runtime.js directly with my browser, boom! There it is, as it should be. So I guess I am having trouble getting -- Twig? Encore? -- to get the memo that we are using https.

HOWEVER! When I use the old deprecated --https option, yeah it works, but with a deprecation warning that I would like to be rid of.

Any suggestions? Thanks.

|

MolloKhan SFCASTS davidmintz 3 years ago edited

Hey davidmintz

I believe Symfony forgot how to read memos :p
I'd expect it to grab the URL schema from the request but it's not doing it for some reason. What you can do is to configure the base_url by adding this config


// framework.yaml
framework:
    assets:
        base_urls:
            - '%site_base_url%'

You only need to set up the site_base_url parameter to point to your domain (or localhost) e.g.


// services.yaml
parameters:
    site_base_url: 'https://localhost:8080'

you may want to use an environment variable instead so you can tweak its value easily when you deploy to production

Cheers!

|

davidmintz MolloKhan 3 years ago edited

Thanks for the reply!
So, in services.yaml I have added

site_base_url: 'https://localhost:8080'

under the key parameters.

In framework.yaml, under the key framework, I added:


assets:
     base_urls:
      - '%site_base_url%'

I cleared the cache just for good measure, and stopped and restarted dev-server and the symfony http server. The result I'm getting is still the same, i.e., symfony does not seem to be picking up the <b>https</b>; the template still says, e.g., http://localhost:8080/build/runtime.js. Don't know what I'm doing wrong, if anything.

This is with Symfony 6.0.10. Do you think upgrading to 6.1 might help?

1 |

MolloKhan SFCASTS davidmintz 3 years ago edited

Hey davidmintz

I had to do some research about this. I believe this is a bug on Webpack (or perhaps on Symfony Encore I couldn't get to the root of the problem), when you start Webpack's dev server using the new flag --server-type https the routes inside the file public/build/entrypoints.json are not pointing to HTTPS, but if you use the deprecated flag --https then, the routes will be generated as expected.
So, something inside Webpack is not detecting the HTTPS flag at the moment of generating the entrypoints.json file. I'd recommend using the deprecated flag and wait for the next Encore version, it may get fixed - or, if you feel proactive, you can create an issue on the Encore project :)

Cheers!

|

davidmintz MolloKhan 3 years ago

Isn't that interesting! Thanks.

1 |

MolloKhan SFCASTS davidmintz 3 years ago

It feels great when you find a bug in a core library :)

1 |

akincer 5 years ago edited

The https option resulted in this error. It's not going to stop me from continuing since I can just use http.

Error: not enough data

|

Victor SFCASTS akincer 5 years ago

Hey Aaron,

Thanks for sharing your workaround with others!

Cheers!

|

Sargath 6 years ago edited

For those who prefer npm instead of yarn, use it like that npm run dev-server -- --https --pfx=$HOME/.symfony/certs/default.p12

|

MolloKhan SFCASTS Sargath 6 years ago edited

Hey Sargath

Isn't there an extra `--`?

|

Sargath MolloKhan 6 years ago

Yes there should be an extra `--` https://stackoverflow.com/a...

1 |

MolloKhan SFCASTS Sargath 6 years ago

Cool, great I just wanted to clarify :)

|

This course is also built to work with Vue 3!

Vue 2

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.30.0", // 0.30.2
        "axios": "^0.19.2", // 0.19.2
        "bootstrap": "^4.4.1", // 4.5.0
        "core-js": "^3.0.0", // 3.6.5
        "eslint": "^6.7.2", // 6.8.0
        "eslint-config-airbnb-base": "^14.0.0", // 14.1.0
        "eslint-plugin-import": "^2.19.1", // 2.20.2
        "eslint-plugin-vue": "^6.0.1", // 6.2.2
        "regenerator-runtime": "^0.13.2", // 0.13.5
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^8.0.0", // 8.0.2
        "vue": "^2.6.11", // 2.6.11
        "vue-loader": "^15.9.1", // 15.9.2
        "vue-template-compiler": "^2.6.11", // 2.6.11
        "webpack-notifier": "^1.6.0" // 1.8.0
    }
}

Previous Challenge

Next Chapter