Routes in Firefly webapps

[harpreet_ahluwa]

I have a simple webapp and have used react router, however within the application the url changes to the route part which is not found by firefly.

Here is the webapp with links

 <Router>
          <div>
            <ul>
              <li>
                <Link to='/'>Home</Link>
              </li>
              <li>
                <Link to='/button'>Button</Link>
              </li>
            </ul>
            <hr />
            <Switch>
              <Route exact path='/'>
                <Home/>
              </Route>
              <Route path='/button'>
              <ButtonDemo />
              </Route>
            </Switch>
          </div>
        </Router>

The URL on navigation is https://experience.adobe.com/?devMode=true#/@ags1008/custom-apps/button which results

in Error 408 Request Timeout.

Any recommendation on how to achieve this navigation.

[duypnguyen]

Hi @harpreet_ahluwa - in the latest CLI release we enhanced the web UI template with react router. Please update your CLI `npm install -g @adobe/aio-cli` and try creating a new app with web assets.

[harpreet_ahluwa]

Hi @duypnguyen, I tried the exact same code after updating the cli and creating new app. This time it does not navigate anywhere. Nothing happens on click. With the old project the html code is generate as href with onClick event having different code than the newer one. The latest project has the links as spans.

Pre upgrade of CLI

Post upgrade of CLI

[duypnguyen]

@harpreet_ahluwa- could you share the background what you are trying to achieve with the button click event? If it is for page navigation, why don't you leverage the Sidebar component already available with the template (see screenshot)?

[harpreet_ahluwa]

Hi @duypnguyen, I created a fresh app (aio app init test) with default actions and web assets and it does not have the UI like yours in the screenshot. I see the old one, screenshot attached. To create using the template you have shown, is there a different flag to be passed?

[duypnguyen]

Hi @harpreet_ahluwa - sorry I was using a pre-release version of the app plugin which is yet to be included in the aio-cli core packages. But you could try it today by installing the new app plugin version `aio plugins install @adobe/aio-cli-plugin-app@4.0.0` (but remember to uninstall it when this version makes it to the core). Then you will have the new UI with `app init` or `app add web-assets`.

[Urs_Boller]

HI @duypnguyen / @harpreet_ahluwa I made a test yesterday and was able to run `npm install -g @adobe/aio-cli` then `aio app init <myAppName>` including the new layout with the router. there was no need to install any preview version, just updating to latest aio-cli...

[duypnguyen]

@Urs_Boller - awesome, thanks for verifying it!

[harpreet_ahluwa]

Hi @Urs_Boller I updated my CLI to 3.7.0 and do not see the side bar, what version do you have. The code generated is the standard without sidebar in app.js, I would love to get it working in 3.7.0 as my app is initialized with it.

Hi @duypnguyen , I tried version 4.0 and the can see the sidebar. However the picker components in the "You app actions" link gives an error, attached screenshot. On commenting it, I am able to see the sidebar with proper navigation. Thanks for your help.

[Urs_Boller]

@harpreet_ahluwa I setup a new app in a new folder with latest codes, could see the sidebar. then I copied the needed code parts to my current project which is running on CLI 3.7.0

[harpreet_ahluwa]

Thanks @Urs_Boller, I plan to give that a shot later in the day. Did you run into provider error with the picker component ?

[Urs_Boller]

@harpreet_ahluwa I had no issues with the new sidebar in the example app.