When upgrading to React 18, does a MUI 5 / React 17 app with #mui/styled-engine configuration, are bugs introduced? - styled-components

I have a 'create react app' using React 17 and MUI 5. I modified the MUI 5 config to use the 'styled-engine' so I can use styled components as per the documentation at mui.com
I haven't yet tried upgrading to React 18, but I've read in general there are issues/bugs that are introduced.
My question is if there are any posts or docs on how to upgrade to React 18 with a MUI 5 installation that uses the styled-components styling engine???

I've also started with the upgrading to react 18 from 16.8 with MUIv4. it's proven problomatic since i have to change MUI as well to v5.
so, far these are the resouces that helped me:
https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500
Good luck

Related

migrating from bootstrap 3.0.2 to 3.4.1

i searched google but couldn't find any migration guide.
I've working website that is in Bootstrap 3.0.2, I am upgrading it to Bootstrap 3.4.1 because of the vulnerabilities found in <3.4.1, I know I may have to give my code a major revamp to migrate it. I just want to know is it safe to use bootstrap 3.4.1 ? or migrate ot v4 ?
also can you point me to any migration guide for bootstrap v3.0.2 to 3.4.1.
If you do decide to go forward to v4 I would recommend going straight to v5 instead, the latest version. It is a lot more stable with not as much JS (even though v4 was very good).
v4 and v5 are not that different really, but the differences between v3 and v4 are huge. Most of the time this is coming down to the way attributes are detailed. In v3 navbar for example two of the attributes were data-toggle and data-target. From v4 onwards these became data-bs-toggle and data-bs-target.
I suspect those changes will be the biggest thing to do, otherwise it might not take as long as you think.

Convert Angular 2/3/4/5/6 project to Angular Universal

I have just updated my project to work with Angular 5, and I have got a NodeJS setup on my hosting so I want to create an Angular Universal Application, I would like to convert my current Angular 5 project into a working Angular Universal project that I can setup on my hosting.
The only thing I found on this so far is this;
Convert Angular 4 web app to Angular Universal app
I followed this and It gave me errors, I imagine due to the quick changing nature of Angular that the answer is most likely outdated, so I was wondering the best way to convert it.
Should I just use the starter seed and do the tedious work of adding all my code?
The best way to do this for me personally was add in all my components, services, modules into the universal-starter project, ensure I remove hammerjs or import it properly (for Material 2). I converted most of my components to have .module so I could use their lazy loading (not forgetting to add these paths properly in my routing file and in the static lazy loading path)
It only took a few hours and alot of that was just bug testing/fixing so it was pretty easy all in all.
I had the same issue several weeks ago. There is a Wiki on how to implement Universal into an Angular CLI project : https://github.com/angular/angular-cli/wiki/stories-universal-rendering
Maybe that helps you out.
I found it the easiest to take the current Angular Universal Starter Kit and import all my Modules into a fresh installation. As the new starter is for Angular 5 CLI I hope it's future proof. We will seeā€¦
I wrote a starter kit for MEAN applications with Angular Universal for Angular 5 and you can clone my repository at GitHub here: https://github.com/Stanza987/mean-starter-kit. It provides all the instructions you need to get started. For your specific app, you can just delete the MongoDB part (Mongoose and the out of server.js, node_src/config/database) and npm uninstall mongoose and be able to integrate your project in.

How to apply Metronic 5 to Angular-cli and Nodejs project?

Recently I bought the Metronic Theme (Metronic homepage) and I want to apply it to my ongoing MEAN Project (Mongoose, Express, Angular-cli, Nodejs).
I do realize that the Mongoose and Express part of the project is no affected by the Theme, but how do I install it? The documentation is kinda unfriendly (to me).
Any help would be welcome, since this is my first time applying a CSS theme to a project.

"generator-jhipster-material" ported to latest?

I am trying to use the generator-jhipster-material to generate the Jhipster in combination with Bootstrap material design and I was not successfull in achieving it.
Does the "generator-jhipster-material" has been ported to latest Angular 4, Jhipster 4, Bootstrap 4 ?
No because last publication is from one year ago (before Angular 2+ support was added to Jhipster)

nodejs express 3.0

I have a nodejs express 2.0 application and I want to use express 3.0 within it. Tell me please which is state of express 3.0 at now and is there examples of express 3.0 applications?
I saw connect 2.0 has been released, so can I use it with express 2.0 ?
I have had the same issue myself with my applications after doing npm install express .
TJ has upgraded version 3 and added/removed some features (better or for worse Im still ascertaining :P )
But the 2 things you need to MAKE sure to change on a default application is change:
app.register..
to:
app.engine
And to know that dynamicHelpers and helpers are no longer there. You have to use
app.locals.use
Strongly recommend reading his migration guide:
https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x
TJ has had some of his examples updated (and in the process of updating others) which I found a good helper to picking it back up
https://github.com/visionmedia/express/

Resources