Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Greece4ever/PX-Scraper
Deployed django project that uses react as a front-end. Saves your URLs and gives a GUI Represetnation. Something like browser bookmarks.
https://github.com/Greece4ever/PX-Scraper
django react urls
Last synced: about 2 months ago
JSON representation
Deployed django project that uses react as a front-end. Saves your URLs and gives a GUI Represetnation. Something like browser bookmarks.
- Host: GitHub
- URL: https://github.com/Greece4ever/PX-Scraper
- Owner: Greece4ever
- Created: 2020-08-13T18:24:41.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-02-19T09:52:28.000Z (over 3 years ago)
- Last Synced: 2024-07-09T02:55:09.321Z (2 months ago)
- Topics: django, react, urls
- Language: JavaScript
- Homepage: https://myscarpeapp.herokuapp.com/
- Size: 777 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# PX-Scraper
This is the development source code that references this [deployed website](https://myscarpeapp.herokuapp.com)
The whole project relies on the file [scraper.py](https://github.com/Greece4ever/React-Django-Integration-Project/blob/master/api/scraper.py) witch makes use of python's `HTTP Requests` and `bs4` modules scraping a specified domain an then returns a JSON object response that looks like this
```js
{
"url":"https://www.youtube.com/watch?v=dQw4w9WgXcQ",
"title":"Rick Astley - Never Gonna Give You Up (Video)",
"description":"Rick Astley's official music video for “Never Gonna Give You Up” Listen to Rick Astley: https://RickAstley.lnk.to/_listenYD Subscribe to the official Rick As...",
"site_name":"YouTube",
"image":"https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg",
"keywords":[
"the boys soundtrack",
" the boys amazon prime",
" Never gonna give you up the boys",
" RickAstleyvevo",
" vevo",
" official",
" Rick Roll",
" video",
" music video",
" Rick Astley albu..."
],
"domain":"WWW.YOUTUBE.COM"
}
```
Then the React-Front-End gets this object and with some `JS` and `CSS` magic it turns it to this
# Integration
The only files needed for the production build (and the simple integration) are those inside `build` which can be generated by running
This will most likely run on all existing versions of django but I know that it 100% works on `Django 3.0.8`
In your `React APP`
```sh
yarn run build
```
or with npm
```sh
npm run build
```
This will Generate a file structure that will look like this
```
- asset-manifest.json
- index.html
- logo192.png
- logo512.png
- manifest.json
- precache-manifest.(hasnumbers).js
- robots.txt
- service-worker.js
- static
```
To connect this with `Django`
- [Settings.py](https://github.com/Greece4ever/React-Django-Integration-Project/blob/master/space/settings.py)
```python
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
#Here put the root 'build' directory that was generated to look for html files (templates)
os.path.join(BASE_DIR,"frontend/build")
],
...
},
]
```
and also for the `CSS` and `JS` files
```python
STATICFILES_DIRS = [
#Directory to look for static files
os.path.join(BASE_DIR,"frontend/build/static")
]
```
Now to configure the routing in the main projcet's [`urls.py`](https://github.com/Greece4ever/React-Django-Integration-Project/blob/master/space/urls.py)
- [urls.py](https://github.com/Greece4ever/React-Django-Integration-Project/blob/master/space/urls.py)
```python
from django.urls import path,re_path
urlpatterns = [
#Any URLS you have here plus these
....
#This is the index.html file in build
path('',TemplateView.as_view(template_name="index.html")),
#If you use React-Routing and want to handle all other urls by react-router you put this here (Any urls configured before will be handled by django)
re_path(r'^(?:.*)/?$',TemplateView.as_view(template_name="index.html"))
]
```
and this is it for the React-Django integration, you only need the `build` folder for the front-end and the `urls.py` and `settings.py` configurations
This is fully suitable for the production build and you will not need to change anything in order to get react and django to work