Stenciljs Routing issue

user_1107888 0
Viewed 207

I have declared following routes in the app-root.txs file of my stenciljs app:

<main id="main">
     <div class="ba-content-header">
       <stencil-router>
          <stencil-route url="/" component="post-home"/>
          <stencil-route url="/editor" component="page-home"/>
       </stencil-router>
     </div>

The approot component is used in the index.html file:

<body>

 <app-root></app-root>

</body>

Now, the default route functions correctly and on that component I have a form element having a button :

<form action="/editor">
   <button
     id="send-message"
     class="ba-btn ba-btn-primary"
     type="submit">
     <span>Send Message</span>
   </button>
 </form>

I am using the /editor route as form action and when the user clicks the Send Message button , I want him to be navigated to the component represented by this route. This works locally on the webpack dev server with npm start but I get a 503 error on nginx Web Server. I have tried with making the following entry in the nginx.conf file:

location / {
    try_files $uri /index.html;
}

but to no avail and the problem persists. Whats the solution to this problem?

stenciljs typescript reactjs javascript
1 Answers

I have almost the same but my nginx.conf is bit different ($uri/) so maybe you can try this?

location / {
  try_files $uri $uri/ /index.html;
}

EDIT: actually I notice you don't have "stencil-route-switch" wonder if that is the reason? (or exact={true} for root) Here is what I have (which works with deployed environment using nginx)

<stencil-router>
  <stencil-route-switch scrollTopOffset={0}>
    <stencil-route url="/" component="app-welcome-page" exact={true} />
    <stencil-route url="/examples" component="app-examples-page" />
  </stencil-route-switch>
</stencil-router>
user_29656060
Related