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
Related
Basically I have a project in Django, in all it has 7 apps. I want to shift one of them in react.
Say app 'Student' is the one which I want in React. I want to know if its possible to do so, if yes then how?
Here is what I tried, I created a react project and using npm run build command I got a build of that react project.
Now for base url of Student i rendered template which was in react build folder.
Something like this.
urls.py
urlpatterns = [
...
...
path('student/', views.Student, name='student'),
....
]
views.py
def Student(request):
return render(request, 'build/index.html')
Where index.html is the file present in build folder.
Using this approach i was able to render the react template but the other url routes were not working.
Please let me know what's wrong in this approach, if this approach is wrong then do suggest another approach.
It's possible to do that. It has been explained extensively in this tutorial.
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
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.
I'm hoping you can point me in the right direction for finding out how to deploy a static single page react app to my server. Nothing fancy, no routing, no database--imagine a simple 'hello world' page. What do I need to do to get the react goodness into static files I can upload to my server?
Thanks!
Here's a great boilerplate to get started. This will deploy to heroku no problem. https://github.com/alanbsmith/react-node-example Also checkout the react docs facebook.github.io/react/docs/getting-started.html
Basically if using ES6 or JSX you do your build first, then deploy.