Storybook and React route - reactjs

I'm going through an impasse, I would like to know if there is a possibility to integrate the storybook as a route in my react app, if so. How can it be done? Could it be done as micro frontend?
I've done a lot of research on this but I can't find any answers to any of the questions.
I saw some discussions on github but none reached a correct conclusion or revealed any examples

Related

Can I use React for my UI on a Wordpress project?

I have been playing with wordpress lately and I managed to deploy a simple page via a web hosting company (whc) with a domain name and everything. I love working with React and I am looking to understand how it would work in order to use WordPress with React. I played a bit with the ReactPress plugin and went through some ressources online but I am still unsuccesfull. From my understanding they are two main ways to do such a thing and I think I am mixing them up. I was wondering if there is a clear way to do so. Any info will be very welcome
There's a React framework for WordPress. You may check that.
https://frontity.org/ have a look

Conversion from an create-react-app (CRA) to CRA + Next.Js app

I have a SPA made with create-react-app and it contains a forum where logged in users can post along with other features. The forum is simply a component within the app currently.
For SEO purposes I want to make the forum public and like Stack Overflow use dynamic routing for those posts and it should be viewable to anyone searching on Google without having to login. The user has greater abilities when logged in.
So I assume I have to implement server-side rendering on the forum using Next.js.
The problem is the rest of the code(React + Redux implementation) needs no changes and converting it to Next.js would be unnecessary. Is there a way to implement the forum within the CRA?
Yes there is! The official Next.js docs actually offers solutions on how to incrementally adopt Next.js.
There are two flavors:
subpaths
rewrites
Their documentation explains both in detail: https://nextjs.org/docs/migrating/incremental-adoption

How To Add Server Side Rendering To React Single Page App?

I built a React app a year ago, and totally stopped working with React, so I am really really rusty.
Site is here: http://allvintagesearch.com
I'm using eBay API.
I'm sort of afraid to touch it, so wondering if there are any tips someone can provide in adding the ability for this site to get better rankings in google (right now there is really not much traffic).
Any help is appreciated.
If your site is static you can use Gatsby, otherwise, your best option is NextJs. you can check their doc. you can also find very good tutorials online.
NextJs
Gatsby
There are some websites like https://website.grader.com/ that they give you scores about every aspects of your website (e.g performance, security , SEO and etc) and then they tell you what you are missing and how to fix them. for google search i would recommend you to have look to this link:
Get your website on Google
hope it gives you some help to start from.

Integrating material UI example with next.js

I am trying to quickly create a dashboard with next.js and react.js as a front end using tempaltes from material-ui.
Using next-create-app and find it easy enough to get something up and running but I just can't seem to integrate this dashboard.
https://github.com/creativetimofficial/material-dashboard-react
I realise that material UI has a github link for next.js here https://github.com/mui-org/material-ui/tree/master/examples/nextjs but for some reason I can't install it either...
when using the curl function i get locked out for some reason. I can use git functions fine though - maybe that would solve the issue? I don't think there's a way to get that specific branch though.
Appreciate any help - I realise it's a simple question yet I've had some difficulty with it so would love some help.

Universal rendering for react app based on create-react-app

I have an app based on the create-react-app starter kit and need to switch to universal/server rendering due to SEO issues.
Is there an easy way or example of taking the create-react-app teamplate and adding or modifying it to support universal rendering?
A lot of the examples I see for universal are overly complex for my needs and I prefer to keep it very clean and simple, if possible.
Thanks.
EDIT: FYI,
I found this medium post which points at this repository.
Seems simple enough, but since I'm a newbie on all webpack/react/node related stuff, if anyone thinks it's the wrong approach, would love to know...
There was a proof of concept of adding server rendering in this PR.
I can’t speak to how good it is but it’s something you could start with.
You may also look at some of the alternatives.
A few of them provide server rendering out of the box.
I've just created react universal (server-side rendering) starter used recommendations from redux and react-router v4. Fill free for feedback
https://github.com/gzoreslav/react-redux-saga-universal-application
You can take your app (bootstrapped with Create React App) to the next level by replacing react-scripts with a slightly altered version - react-app-tools, which allows adding server-side code to your project (e.g. for server-side rendering purposes and/or implementing an API endpoint). It will allow compiling and running your app using normal Create React App pipeline, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.

Resources