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
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.
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
I'm missing up information about deployment. After running npm run build to my react project - i do get a build folder.
Unlike the example in React.org "like button" here: https://reactjs.org/docs/add-react-to-a-website.html, My component now is bigger,with many sub-components, with fetch calls... etc - it's a whole project.
In my other project, i would like to use this app, as a another part in a bigger app, to share this project between other of my projects.
is this possible?
if yes? how? if no? why? any other way?
Thank you !
--- Edit ---
Some of the other projects are not written in React. some are single page applications with jQuery. some with Backbonejs. which also does not use npm.
The option for submodule is applying only to the other react projects
It's certainly possible.
I think what you're looking for is to publish package to a private npm registry.
However if your project is small enough it might be easier to use github submodules.
For the most part it depends on the size and the scope for re-usability of your project. If your project is just meant to be exporting some Components/utilities that you want to use in other projects you might want to use the private npm registry but if you want access to the source code of the project and want it as a subset of your bigger project's repository, you might want to make use of github submodules.
I figured out a way to do this. for the whole project.
Many pages such as React add to a website, reffer only to a single component. not to the whole project.
Now i know.
While developing, on the index.js we have something like this:
ReactDOM.render(
<MyMainComponent
someParam="something"
/>
, document.getElementById('root'));
This code, made it running on my page. Now, to have it General, that i could use it everywhere i wrap it in a global function:
window.reactMyMainComponent = (params, elm) => {
ReactDOM.render(
<MyMainComponent
{...params}
/>
, elm);
}
Then, i run yarn build
Then copy the js folder from /build/static/
Then take it to any other project, adding the 3 javascript files that are inside
Then i can call my new function reactMyMainComponent Anywhere, and use it when i want wherever i want :)
such as :
var statsBox = $(".someComp")
reactWordCloud({
width:statsBox.width(),
height: statsBox.height(),
infoId:9260
}, statsBox[0])
Tada, now everywhere can use this :) All projects.
I'm looking to embed my react application into an existing plain html / javascript website. What I've found so far is that you are only able to embed individual components into existing websites, not entire react applications.
Naturally I have an app component which contains the entire application. Am I able to embed the full application by embedding this component? My concern is all the modules I'm using (e.g. axios, bootstrap) will break.
I've been looking for a good tutorial on how to do this but I'm not finding many examples of trying to embed the entire application into an existing page.
My understanding of how to do this, is to reference the react javascript source links in the html page head, possibly also babel although its unclear to me if babel will work. Then we can use the renderDom method like we normally would.
On page load can I run my index.js file to insert my react app component into the dom? If this would work, are there any issues with file structure, file updates I would need to take care of?
If I'm driving off path out into the wilderness and there is a better way to handle it I'm open to suggestions. I'm just looking to see if someone else has experience doing this before I start down a bad path.
I was able to embed my full react application by doing the following...
I built my react app production files with npm run build
I copied those files into the existing web project at the root level
Then I opened the index.html file generated from npm run build and copied the scripts in the head and body sections to the page I wanted to drop in my application
Finally I added a div with the id root (this is what my renderDOM method is looking for) where I wanted my application to appear on the existing web page.
That was it. Super easy, thanks for the help!
Just wanted to add a quick additional approach here.
If you already have a Flask app and you're trying to put React components or an app (so the base component of an app) onto an existing HTML page in the Flask app, basically the only thing that you need is Babel, unless you are able to write React components without using JSX (so in plain Javascript) in which case you'd need nothing.
Step 1: To attach Babel to your project, you'll have to grab the Babel node modules which means your project will be associated with NPM for the sole purpose of using the Babel functions. You can do this by running the following commands in your project root directory (Node.js must be installed):
npm init -y
npm install babel-cli#6 babel-preset-react-app#3
Step 2: Once Babel is attached to your project, you'll have to actually transpile the existing React component .js files from JSX into plain Javascript like so:
npx babel --watch (jsdirectory) --out-dir (outputdirectory) --presets react-app/prod
where (jsdirectory) is the path to the directory where your React component files written using JSX are, and (outputdirectory) is where you want your translated files to show up--use . for (outputdirectory) to have transpiled files appear in your root directory.
Step 3: After the plain Javascript versions of your React files appear, make sure they are linked to your HTML page instead of the original JSX-utilizing files (replace the original script tag's .js file)
Step 4: Make sure the HTML page in question is linked to the .CSS files you want (they will modify the transpiled Javascript in the same manner as they did the JSX files in a project made using Create-React-App because the class names are the same) as well as the required React resources:
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
After you do those quick steps your React components should render no problem on that page in your Python-Flask application.
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.