Recently i have developed a storybook. Now, i want to attach it to another project which is developed using next.js. Storybook uses it's own routes whereas my next.js application has it's own routes. I want to manage all the routes using next.js and override storybook routes.
Let say my application runs at:
localhost:3000
and i want to add the storybook at
localhost:3000/storybook
How can i tell next.js that on this route a build of storybook is to be served or i can control the routes of stroybook. Is there a way to achieve that?
From what I've seen, the recommendation is usually to run Storybook on another port locally. If you want your Storybook accessible to the public, I would recommend doing a URL like storybook.your-site.com or ui.your-site.com.
Related: https://github.com/storybookjs/storybook/issues/5975
Related
None of my react components render when I use github pages. My CSS seems to work (I can see the background pattern) but none of my react components render. Everything works fine locally, but it does not when I use github pages. Here is a link to my repo: https://github.com/GibbsV3/MySite
I have tried using the Router component but so far I cannot figure it out. Is there something wrong with my index.html file?
Github pages works for static pages.
But react is not static page. Your index.html file interacts with javascript and adds contents, components.
There are some ways you can deploy react-app to github pages but I would recommend using vercel or netlify
You have to build a static page before deploying it to the GitHub page. Follow this LogRocket article.
I setup react project by create-react-app and I found that the subfolder of react won't able to autoload when I create a new file, eg
<!-- file: /public/subfolder/index.html -->
<p>subfolder content here</p>
anyone knows how? According to the official react doc, it looks like react doesn't allow this kind pattern? Anyone knows more content?
This is not actually a restriction from React itself. That was how Webpack has configured in create-react-app. Please look at the below code snippet of a typical Webpack config file in a React application. If we need more custom configuration, we have to manually configure Webpack and Babel as per our requirements.
Link for the documentation: The best webpack configurations for React applications
I understand how BrowserRouter and HashRouter work in React Router v4. I am currently using BrowserRouter so I don't get such ugly URLs. I have seen many examples, most of which are outdated. I would like to know how I can refresh the page on a route without getting a 404 on the production server? Essentially having React re-render the component. I should also mention that I am using create react app and the react-scripts provided to start and build the project. I tried the historyApiFallback thing in webpack and it doesn't seem to do anything.
If you have a simple application and wan't to avoid server side rendering of routes, you can use "React Snap"
https://www.npmjs.com/package/react-snap
Once you configure it, it pre-renders your web app routes into static HTML. I use it for a lot of my react+router apps and I love it.
The particular use case I'm looking at is running a single page application at the root path / of a domain, and having a statically rendered blog at /blog.
I've already checked out the advice at https://www.gatsbyjs.org/docs/path-prefix/, however I'm not entirely sure how this would interact with the React app running at /
Is there a way to get React Router in the React app to support handing over to Gatsby?
Gatsby is just React so yes :-)
Build your SPA & blog both with Gatsby. Put the entry to your SPA at src/pages/index.js and it'll be served at /.
If you need client-only routes, you can set those up like this: https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating-client-only-routes
Gatsby is basically CRA with some additional features to make it easy to build websites.
So i had this thought about making a Jekyll SPA blog
and somehow make use of something like React.js / React Router or Vue.js / Vue Router to achieve that SPA routing feel.
Is it possible to achieve this, and if so where would i import and use the router ?
I don't think it's possible with Jekyll (I assume that you want to show in router-view component pages generated by Jekyll).
A better way would be creating a blog entirely in Vue (or React). When you push changes to Github repository, you should have configured Travis that will build the whole project and push to gh-pages branch.