PX-Scraper

This is the development source code that references this deployed website

The whole project relies on the file 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

{
   "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

yarn run build

or with npm

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

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

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

• urls.py

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