React App with installable plugins from remote location - reactjs

I am building a customer portal and Iam thinking of future expansion of features and modules. Is there a way how to achieve this in React?
I remember using Joomla and similar CRMs before where you go to modules inside your site admin, download module you wanted and then it was accesible.
I would like to have separated repos for each plugin and install them via gui ratehr than actual code.
Is tehre a way to do it?
Thanks for any ideas

Related

How do you add React as NPM package to Apostrophe v3?

we're working with Apostrophe CMS v3 and we're trying to add some custom apps to the pages with React. I was able to add components inside using the React CND scripts and loading components as script files in views/layout.html. But it probably isn't best practice. I was wondering if theres a way to add React apps into Apostrophe using npm packages and imports. Thank you very much!
It looks like this question was cross-posted to the Github Discussions forum: https://github.com/apostrophecms/apostrophe/discussions/3393
The response there from the lead software architect:
You can do it in two ways. Which is best depends on your needs.
If you are building a single-page React app but you need some dynamically edited CMS content, you should most likely keep building your React app just as you have been, and use Apostrophe's REST APIs to access piece and
page CMS content where you need it. See the documentation on our REST APIs.
On the other hand, if you are building a pretty normal CMS-driven website
but you have a few experiences inside your pages that would benefit from
embedding a React application, you should carry on with your Nunjucks
templates for Apostrophe as you normally would to build a website with
Apostrophe, and in addition set up a webpack build of your own to build
your React apps, and push the output to a ui/public/build.js file nested
in any module of your Apostrophe project. Any .js file found in a
ui/public subdirectory of a module is automatically included in the
frontend bundle generated by Apostrophe.
In that situation, you can still use the REST APIs to access data from the
React app, or you can pass data via data attributes in your markup. If you
do the latter, the | jsonAttribute Nunjucks filter is helpful to turn it
into a string that is safe for incorporation into a quoted attribute in
your markup.
Hope that helps!

From Web Client repo to Web Client, App Client, Utils/API

I currently have a growing React JS project. Within the project I have a folder for my utils that include business logic and API calls.
The plan is to separate the the web client, the utils and a new react native based app client into three different projects. The web and app client will both make use of the same api calls and business logic.
What's the best way to go about splitting up the current project and how would I link everything? Is an NPM package the way to go or is there a way to do something similar within Github?
TL;DR: What's the best way to separate my utils folder into its own project and using it within my current web project?
You could make an NPM package. That would work. However I found it is easier to use a symlinked folder. It's quicker, simpler, and plays better with dev and debug tools.
The downsides of an NPM package are:
Getting build processes like webpack to work and give you nice source code maps for debugging is a headache.
It's easier to get code-versioning issues.

How to use spatie/laravel-permission package with react js for roles?

I want to develop a system module based using Laravel 6 and reactjs 16. It will be included Roles and Permissions functionalities.
I am using https://github.com/spatie/laravel-permission for roles permissions. I just want to know how to use it with reactJs.
Laravel 6.0 is being used for database and backend functionalities.
IMHO it's not depending from front-end technologies (like react).
And suggest you to read this article or watch appropriate youtube video.
By the way, I don't think that here we need to write about installation steps for that popular package. Because all that stuff written in the official package Readme, and issues are there too. So if you will get an error, or have some troubles, people will try to help for the specific case

Keystonejs in production mode in GAE: can't build the admin ui

Accessing the admin UI in GAE (standard nodejs) fails because while building the admin ui, Keystonejs seems to be trying to create files in GAE environment (mkdir or create file).
In my case, it's while trying to build the less files and thus create /srv/node_modules/keystone/admin/public/styles/keystone.min.css when I try to reach /keystone/signin.
I tried unsucessfully KEYSTONE_PREBUILD_ADMIN option.
I really don't know how to solve this.
Is there a way to extract the admin ui react app and build it before deployment?
Is there an hidden option to prevent this kind of issue?
The only other option that I can think of would be to use keystonejs as a headless server, and build my own admin UI in my React App. But it would be a shame not beeing able to use keystonejs CRUD engine for content :/

Integrating Angular CLI with Squarespace

I am interested to know if anyone has been able to successfully use Angular CLI in a Squarespace site.
I have been searching for answers to this problem but can't find a solution. I know that you can add custom scripts to a Squarespace site and/or add scripts via CDN but Angular CLI apps are usually deployed using a different method.
Any help is appreciated. Thanks!
NOTE: I know that this is not a best practice and devs should deploy their Angular CLI app via AWS or with a similar platform.
I'm surprised no one has answered this. Yes, there's no reason why you couldn't use AngularJS or any other Javascript library with Squarespace. You'll need a 'Business' level account, however, and you'll want to check out the developer portal here:
https://developers.squarespace.com
Squarespace provides you with a Git repository and a CLI that you can download via NPM that will let you run a local squarespace server and develop your site from scratch or with a base template.
You can check out their docs on 3rd party avascript (e.g. Angular) here:
https://developers.squarespace.com/custom-javascript/
Since your question is specifically about using the CLI, I would just note whatever your final 'production' bundle looks like and include that in your git repository, so that you can reference it in your main html page.

Resources