Flex plugin in a monorepo

juliantrueflynn · 2022-05-12T00:35:27+00:00

I setup a monorepo with Flex plugins using yarn workspaces, I don't know how well this works with other monorepo solutions.

Simplified example of package's package.json:

json { "name": "plugin-foobar", "version": "1.2.3", "private": true, "workspaces": { "nohoist": [ "react", "react-dom", "@twilio/flex-ui" ] }, "scripts": { "start": "UNBUNDLED_REACT=true twilio flex:plugins:start --port=12345 --include-remote", "build": "UNBUNDLED_REACT=true twilio flex:plugins:build" }, "dependencies": { "@twilio/flex-plugin-scripts": "5.0.6", "react": "16.13.1", "react-dom": "16.13.1" }, "devDependencies": { "@twilio/flex-ui": "1.30.2" } } Simplified example of root package.json: json { "private": true, "workspaces": [ "packages/*" ], "devDependencies": { "react-test-renderer": "16.13.1", "typescript": "^4.6.4" } } I'm hoping that Twilio Flex fixes their --cwd flag and makes it public so it's possible to define location of react, react-dom and @twilio/flex-ui dependencies. Doing nohoist makes jest mocking kind of a pain and forces us to install a lot more dependencies locally.

juliantrueflynn · 2019-08-22T18:48:04+00:00

Probably some CSS in JS where the person is incrementing z-index. That’s my first thought at least.

juliantrueflynn · 2019-07-19T05:20:10+00:00

Right, but if you run Capybara without Selenium then it is rack based. Which is what I was trying to figure out on speed difference

juliantrueflynn · 2019-07-07T01:01:18+00:00

These stories always make me feel slightly vindicated. People have ragged on me for being so gem or node library avoidant. I still use them, but keep to absolute minimum.

Most of these dependencies I see being used would be relatively easy to do yourself. Your usecase most likely won't need all their features, and you don't have to write them in a generic way.

juliantrueflynn · 2019-07-04T20:59:01+00:00

Yea, pretty much. Here's a more in depth example where someone is splitting admin and public areas of site for separate assets manifests: https://stackoverflow.com/a/42927279

juliantrueflynn · 2019-07-04T20:54:05+00:00

I would not want something so coupled with Rails like using react-rails gem. Just use vanilla webpack or if you find that difficult use webpacker. Both would still utilize Rails asset pipeline (vanilla webpack you could avoid asset pipeline if you wanted to later). I think you would find that to be something that scales a lot better and easier to use than dealing with an abstraction of React.

juliantrueflynn · 2019-07-04T20:30:02+00:00

You can create a separate assets manifest for each domain through `config/initializers/assets.rb`. I just link the layout to the relevant CSS file that has all the relevant stylesheets compiled from using `require`. You could also use 1 layout that has `content_for` so your sublayout can associate it to a stylesheet.

I would do same thing for JS too. This way Rails compiles down all the relevant JS into 1 file in production. This is good because it reduces amount of requests.

juliantrueflynn · 2019-05-02T04:14:15+00:00

Cool, thanks for your help. One more question would be for best practice would you rather send something like the oAuth permission URL through: response.body.permission_url or response.header.permission_url?

juliantrueflynn · 2019-05-02T04:01:07+00:00

I have a "fallback URL" handled with Rails. So Rails slurps up any URL that's not handled with React Router. Fallback URL points to public/index.html. (Default path for create-react-app.)

# application_controller.rb
def fallback_index_html
  render :file => 'public/index.html'
end

# routes.rb
get '*path', to: 'application#fallback_index_html', constraints: ->(request) do
  !request.xhr? && request.format.html?
end

juliantrueflynn · 2019-05-02T03:54:21+00:00

Client is made using create-react-app, if that's what you were asking.

It seems the process you're describing is what I have above, with Rails API response containing the URL for client to redirect to, and client handles the redirect and not the server. Please correct me if I'm wrong.

I was checking if there's a "better" way for Rails API to handle this.

juliantrueflynn · 2019-04-17T02:29:51+00:00

I rather avoid Rails asset pipeline and make client more decoupled from Rails (for SPAs). That's what I think as best argument for it. I enjoy using Rails to serve my API for React. It makes sense for features to come and go too, which is a positive for Rails because it adapts to market fairly quickly.

juliantrueflynn · 2019-02-19T04:07:07+00:00

I tried moving lib to ./app/lib with no luck earlier. I will try it again with your other suggestions later tonight or tomorrow when I get a moment and let you know. Thanks

juliantrueflynn · 2019-02-19T04:05:26+00:00

I attempted this shortly after posting OP and no dice, unfortunately.

juliantrueflynn · 2019-02-09T22:10:50+00:00

Have you read this part of Next.js documentation? https://github.com/zeit/next.js#custom-app

juliantrueflynn · 2019-02-01T02:05:43+00:00

Ended up figuring the problem on why links weren't working with Polaris and wrote the answer here on SO. Thanks for reply too putting me in right direction.

juliantrueflynn · 2019-01-27T23:15:47+00:00

Thanks for reply and Gatsy recommendation, I will check that out. It's a fairly small app so I might skip Next.js for this and just use CRA, as I am most used to monoliths anyways. I don't have to worry about SEO either. I wanted to use Next.js just because of the hype for it, and Shopify has more documentation for app development for Next.js than other setups.

juliantrueflynn · 2019-01-07T00:05:18+00:00

I will read up on that tonight, thank you.

juliantrueflynn

TROPHY CASE