Expand my Community achievements bar.

Routes in Firefly webapps

Avatar

Employee

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.

 

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

11 Replies

Avatar

Employee

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.

Avatar

Employee

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

harpreet_ahluwa_0-1600746977054.png

 

 

Post upgrade of CLI

harpreet_ahluwa_1-1600746992333.png

 

 

Avatar

Employee

@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)?

Screen Shot 2020-09-22 at 09.55.37.png

Avatar

Employee

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?

harpreet_ahluwa_0-1600836866729.png

 

Avatar

Employee
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`.

Avatar

Community Advisor

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...

Avatar

Employee

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.

 
 

Provider_Error_onPicker.png

 
 

 

 
 

 

Avatar

Community Advisor
@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

Avatar

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

Avatar

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