Playing Next Lesson In
seconds

Let's Learn AdonisJS 6 #3.0

EdgeJS Templating Basics

In This Lesson

We'll learn the basics of AdonisJS's homegrown template engine EdgeJS. We'll cover interpolation, conditional statements, looping, variables, state, and more!

Created by
@tomgobich
Published

Join the Discussion 13 comments

Create a free account to join in on the discussion
  1. Having worked exclusively with Express and EJS on the backend - Edge somehow feels more natural and nice on the eyes, just having that if else loop would be a visual eye-sore in EJS.

    Tom, thank you for this amazing content. I am slowing working through the videos and coding along, I later plan to pay for the monthly access for the Inertia videos. You content has been nothing short of clear and amazing so far.

    Lots of subtle lessons as well from your coding style too.

    1
    1. Responding to vladimir-laskin
      @tomgobich

      That's awesome to hear, Vladimir! I'm really happy to hear you're finding the lessons early to follow and enjoying them, thank you for sharing!

      1
  2. @frp

    Hi, I am getting the Cannot lookup rote Edge error when I try to use an edge template with the route() helper in it.

          Error: Cannot lookup route "moms.join"
              at anonymous (D:\www\seeds\resources\views\moms\pages\home.edge:95:0)
    <a class='button' href="{{ route('moms.join') }}">

    That route shows up in list:routes:
    GET /join (moms.join) .................................................. #controllers/join_controller.join

    What am I doing wrong? Please let me know what additional information is needed.

    Thank you.

    0
    1. Responding to frp
      @frp

      I should probably add that the 'moms' at the start of that route name is for a domain:

      router
        .group(() => {
          router.get('/join', [JoinController, 'join']).as('join')
        })
        .domain('moms.test')
        .as('moms')
      
      1
      1. Responding to frp
        @tomgobich

        I haven't yet worked with subdomains in AdonisJS 6, but I believe they work the same as in v5. When building the route's url using the route() method, the third argument accepts the domain.

        <a href="{{ route('moms.join', {}, { domain: 'moms.test' }) }}">
          My Link
        </a>
        Copied!

        The subdomain behavior is siloed, so you can have the same route defined outside the subdomain as well, and they can also be dynamic. Due to these reasons, that's why the domain will need specified when you're specifically looking to build a route for that domain.

        Hope this helps!

        0
        1. Responding to tomgobich
          @frp

          Wow thanks. I did not get that from the documentation anywhere. Hey, question: Do you know of any full-featured V6 example site on Github? It would be soooo helpful to see a full example of all this stuff, service providers, the container, everything.

          0
          1. Responding to frp
            @tomgobich
            1
        2. Responding to tomgobich
          @frp

          So this still is not working. I tried it just like that, console.log confirmed it, and it still says it "cannot look up" the route.

          How can I recreate the route outside of an Edge template? I don't see a helper for that. Laravel had a route helper you could use anywhere in the app to craft a url string. If I had that I could just craft the string in the service and feed it into Edge. Failing that, I will just have to manually create the URL strings. I can, but for all the reasons you know, would rather not.

          Thanks for all your help.

          0
          1. Responding to frp
            @tomgobich

            I just pushed up a working example of subdomain usage you can find at the link below. If you're linking into your subdomain, you'll want to prefix the generated url with your subdomain and include the port if you're local.
            https://github.com/adocasts/lets-learn-adonisjs-6/blob/subdomain_example

            The specific files of interest here are the route definition and the url generation inside of EdgeJS. Within the route definition I also added examples for both the URL builder and the makeUrl method AdonisJS provides. The route method inside EdgeJS is the same as the router.makeUrl method, so the arguments should match 1:1. Apologies, my formatter went a little extreme with the makeUrl usage lol.

            Hope this helps!! :)

            0
            1. Responding to tomgobich
              @frp

              Thanks, I will check it out. I thought I had found the answer (I found "URL Builder" in the docs) but it still won't look up the routes inside Edge. And one clarification: I'm not doing subdomains, I'm doing different domains. It works fine on the routing end - everything routes correctly - but it's just inside Edge that it won't work. I will look at what you did and can probably kitbash it to my usage. I really appreciate all your time. You're a mensch.

              Just FYI, this is how I generate the routes in my routes.ts file:

              for (let site in Sites) {
               router
                .group(() => {
                  router.get('/welcome/:tab?', [WelcomeController, 'welcome']).as('welcome')
                  router.get('/join', [JoinController, 'join']).as('join')
                  router.get('/upgrade', [JoinController, 'upgrade']).as('upgrade')
                  router.resource('users', UsersController).as('users')
                })
                .domain(Sites[site].domain)
                .as(site)
              }
              
              0
              1. Responding to frp
                @tomgobich

                Ah - gotcha, so you're using one server to serve multiple sites? If the routes are shared by all site, then you could most likely omit the .domain() usage as that essentially just namespaces the routes.

                Anytime! Hope you were able to get things working! :)

                0
                1. Responding to tomgobich
                  @frp

                  The URL builder in Adonis works fine, so I generate the route strings in my publish service and put the strings in the Edge template. Works great. Thanks!

                  0
                  1. Responding to frp
                    @tomgobich

                    Oh good, happy to hear you got everything working! :)

                    0