I just shifted my static website to Kirby CMS and it’s awesome. Now I have created an app in React which I want to integrate into my website. What will be my file structure for all the react files? (Only the app is in react rest whole website is alerady using Kirby)
As for most js frontend libraries it is totally up to you. So there is no right way to answer that I guess.
Perhaps a good read: The 100% correct way to structure a React app (or why there’s no such thing).
Thanks for the answer but actually I was asking in reference to kirby. For example where to put my js files and how to manage import paths.
What do you mean with integrate? If the React app is a standalone thing, there is nothing much to integrate, apart from linking to it. Or, instead of your standard index.html, you would use a Kirby template and then within that template, load your dependencies in the same way you do that in your index.html.
Or do you want to consume a Kirby API?
Kirby CMS is on the XAMPP server while my react app is on node server. Yes the app is standalone. How do i merge the two. The main website navbar (built in Kirby) should have a link to the react app. How to do it ?
But you don’t need a node.js server to run your React stuff, it runs in the browser just like any vanilla js code. So to include that into Kirby, you would do that just like any other JS framework.
So all i need is to include all my js files of webapp into /assets/js and create a template for index.html and i’ll be good to go ?
The easiest way would be to create a new page in content, e.g. a folder called app with an app.txt in it.
Then create an app.php template and put the stuff that currently lives in your index.html into it. Then link to your app page in your navigation and everything should be fine.
Right. Cool ! I’ll try that, one last thing, how can I run kirby on a node server instead of a XAMPP server?
Kirby is a PHP app, it needs an Apache or Nginx server that runs PHP in the backend. Don’t know how that works with node.
Hey where does my package.json and package-lock.json of the webapp go ?
I’d put the complete React stuff either into the assets folder or into another publicly accessible folder in the Kirby root folder.
I tried your solution and everything works fine. But now each time my webapp code needs an update i need to do a rebuild manually of my webapp and then manually replace the code on my server. How to resolve this?
Well, yes, of course. You wouldn’t usually develop on your production server, would you? So somehow you have to deploy your locally developed stuff to production.
To avoid the manual deployment via SFTP, there are different ways to achieve that: using Git, using rsync, or even a deployment service.
And running npm and a node.js server are two different things.
I am actually using GIt for my website but in case of the webapp what happens is the build you upload to the server and your development code is different. To update my static website all I have to do is make the required changes and push it into master and it automatically gets updated on server. For the webapp I’ll have to first update my development code, run a npm build manually (since the server is Apache it cannot execute npm build so i’ll have to do it manually) and the replace the new build with the existing. If it was node server this process would have been automatic since the server would then be running npm build itself. I want to acheive the same automation here !
I’d build locally and deploy the distribution code. But if you think you need a node.js server, I recommend you google how to run Node.js on an Apache server then. Of course, you would need access to the server configuration on your remote server.
Edit: before you look into this, make sure that the server where you want to deploy the app does in fact support node.js. Many shared hosting providers don’t.