Piranha with React front end

[monsieurberry]

Hi,

Looking for some advice as to how I could couple up Piranha with a react front end.

I have successfully created a test project containing both and been able to route to the manager (in App.js) with the following...

<Route path='/manager' component={() => {
    window.location.href = '/manager';
    return null;
}} />

But i'm a little stumped now at how I would tackle the routing for my content page slugs? Would I have to add a to App.js for each slug? Seems a bit excessive... Is there a more generic way to approach this?

Thanks Adam

P.S. Extremely new to React

[monsieurberry]

Ok so now the route to /manager doesnt work and is a never-ending redirect. Was definitely working earlier.

[tidyui]

What router are you using, the default react router or a custom one?

[monsieurberry]

Default I believe. Just created a new project using the "ASP.NET Core with React.js" project template and added latest version of Piranha

[tidyui]

So I created a new project using dotnet new react and added Piranha to the .csproj and Program.cs. To reach the manager interface you should just need to navigate to `~/manager´ in your server project. As the ClientApp is just a node application running React the manager won't be available here. I didn't need to make any changes to get this to work.

For the routing of the ClientApp you will probably be good by creating a wildcard route and the using the route value when calling GetBySlug on the Api. You could then use the Route property for your Content Types to specify what component should render that page type in the react application.

Regards

[monsieurberry]

Thanks Håkan,

Still learning about React so I'll give the wildcard route a try and see how I get on. Good to know there are options available as wanting to move in the React direction, but definitely don't want to forfeit Pirahna as a CMS.

Also realised through trial and investigation, you can get to the manager from the ClientApp by adding '/manager' to the 'context' variable in setupProxy.js like so...

const context = [ "/manager", "/weatherforecast" ];

Cheers Adam

[luizalmeida77]

Is it possible to use piranha in a vue project?