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.
Related
I'm creating a react application. The default create-react-app puts the react app in the root folder. However, what I want is something like this:
/index.html --This is a static page
/tandcs/index.html --This is a static terms and conditions page
/react-app/ --This should be the react application
How do I create a site where all the pages are static, but within/react-app/ is the react app, so that when the browser goes to http://localhost:3000/react-app the react application starts?
Like I said, I am new to react so I might have missed something obvious, so apologies for being really stupid, but please help.
Thanks,
A
When you are using react what you see on localhost is the react app you are working on in "dev-mode". If you want to add the app to a webserver you should deploy it to a directory named react-app
So I am new to React and I can currently create different functional components when I use npx create-react-app appname but if I want to "package" these files and send them to my Django's view page, what is the best way to do this? I am having some trouble with webpack configuring everything in the methods I've attempted. I am trying to create a web app. Thank you.
Basically to "deploy" Django + React app, you need to use webpack on your react project, then you store react webpacked scripts in your staticfiles directory in django. Then, you define a view that returns index.html with attached scripts {% static 'reactscripts.js' %}. Thats basically all if you want to combine theese two on simple project.
I hope thats the answer you're looking for.
[edit] Also if you would like to deploy your project (after you've figured everything out), this article may help you to do so
https://mattsegal.dev/django-spa-infrastructure.html
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
Is there any way to use React Router on pure HTML like React on the browser?
Example:
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
React Router is beneficial for React Single Page Apps. Using it in pure HTML files isn't necessary. Here's a nice summary of React Router's purpose.
React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates. React Router uses component structure to call components, which display the appropriate information.
The code example you shared hints at interest in using React from CDN rather than installing the library in your project. If that's the case, it may help to review the post Using React Router with CDN and without webpack or browserify.
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.