How to Create a Flask + Next.js Project | Python Backend + Next.js & React Frontend

hey guys welcome back to a new video in this video I'll be showing you guys how you can build a project with a nexjs react front end and a flask back end approximately two years ago I made a video similar to the one you're watching right now explaining how to do the same thing however in that video I was using Create react app to build the front end which now has been taken off of reacts official documentation and developers are encouraged to use Frameworks like next.js to create their react projects and in this video I'll go over how you can set one up now before I get started I want to go over a little bit about nexjs and why it's better to use nexjs so next.js it offers several advantages it provides built-in server-side rendering and static site generation resulting in Faster page loads and better search engine optimization and it also has file based routing which makes managing routes a lot simpler okay and next.js seamlessly integrates with react making it really easy to adopt its Advanced features while leveraging existing react components and overall it just combines the benefits of react with improved performance simplified routing and effortless API integration so now that you guys have a bit of information on what nexjs is let's begin all right so now I'm going to be showing you how you can set up your front end and back end now before setting up the front end back and we need the folders set up so what I've done here is inside of a folder called next.j ask flask I've opened up my code editor and for those of you that may be unfamiliar with this I'm using vs code so first off I'm going to create a folder called server and this will contain everything that we need for our flask backend then I'm going to create a folder called client which will contain our Nexus Prime okay and I'm going to first go ahead and do the server setup because that is um it does contain less steps and then I'm going to show you how you can set up your client so here I'm just going to do CD server inside of my terminal and I am on Mac so my commands for those of you that are using Windows may be different so if you're using Windows I'm just going to have the commands for the Windows operating system on the screen and for right now I'll just type up everything that we need and first off we're going to need a virtual environment so to create a virtual environment all I'm going to do is python3 hyphen m v e n v which is the name of the library and then the name of our virtual environment which is just going to be b-e-n-d okay and if you give it a few seconds it's going to create the virtual environment and if I expand server you can see that it has been created and next we're going to need to activate the environment so to activate the environment on Mac you would just do Source v e n v which is the name of our environment bin activate and for Windows I'll have both these commands on the screen shown up for you as well so once we've activated our virtual environment we're going to need a server file where we're going to write all of our flask code in so to do that I'm just going to do touch server.pi to create a server file and if you guys aren't too familiar with commands you can just add a file by clicking this right here okay and here you can see that our server.pi file has been created and we're going to write all of our flask code in Python inside of this file right here and next we're going to need to install flask so to install flask I'm just going to do fit three install flask again for Windows it's going to be a different command so I'll have that on the screen as well so if you give it a few seconds it's going to finish installing flask okay and now that we've installed the dependencies that we need for our backend let's go ahead and do the same for our front end so I opened up a new terminal and I'm in the server directory but I need to be in the client directory so to get into the client directory I'll just use CD dot dot and then I'll be CD client to enter into client and to create the next JS app this is what's different um with nextgias so previously we would just do npx create react app and then hit period to create inside of the client directory but with next.js instead of doing create react app you'll be doing npx create next app and period and I'm do and I'm doing periods so that it's created inside of this client directory right here so I'll hit enter and it's going to say need to install the following packages create next app okay to proceed just hit enter here and it's going to ask if you would like to use typescript with this project and I'm just going to go ahead and say yes if you guys would want to stick to using traditional JavaScript that's completely fine as well so yes and would you like to use eslint with this project yes would you like to use tailin CSS yes Source directory this is up to you it's fine if you either put yes or no I'm just going to put no so that I can make it a lot more simpler and app router I'm going to click no for this one basically next.js has a new routing system with this app directory but currently with the majority of react apps that have been created with nexjs a lot of them are using the pages router and I'm sure a lot of you guys would find the pages router a lot easier to follow along with so I'm just going to hit no and it's fine if you really do either but for the purpose of the video I'm just going to do no for this option right here and would you like to customize the default import Alias I'll just click no and it's going to take a while to create the next JS project and to see if it's being created or not you can also you know refer to this loading bar or also expand this client directory and I'll be back once next.js has finished all right so next.js has finished creating my react project right here but before we do anything in react I want to first set up our flask backend and then we can go ahead and make API calls to connect the two so I'm going to exit out of this terminal since my project has been created and inside of my server directory where I have the server.pi file I'm just going to write some code to create a basic flask app so to do this we're going to have to do from flask import flask and I'm also going to import jsonify because we're going to need this to create an API route here next I'm going to create a flask app instance so to do this I'm just going to do app is equal to flask underscore underscore name underscore underscore that's going to create a flask app instance so just call this app instance right here with comments to make it documented and then we're going to need a way to run our app so to run our app we can just do if underscores for name is equal to unrespondent domain underscore underscore app dot run and I'm going to put debug is equal to true to let the file know that we are in development mode only remove this right here if you're going to be deploying your application to production okay I'm just putting debugs equally true so that if we get any errors we'll know right off the bat and we'll know what we need to fix okay and next I'm going to create a app route so for the app route I'll just do at app.rout I don't know forward slash um API and then home I'm gonna put methods you can get Define return home and then return jsonify with some kind of Json data so I'll just do message hello world okay so this is our flask API that we've built and just to you know kind of iterate what over what I've done we created this app instance to create a flask app then we have the code that we need to run our app right and then we have an app route which can be accessed at forward slash API forward slash home and the only methods that we're going to be accepting at this route is the get method or the yeah get requests um and then here all we're doing is returning um Json and we have a message that says hello world so that's all that this app is doing okay and our goal is to display this message of hello world onto the front end and that's basically going to show you how to um pair the front end and back end together to create one application okay so now that we've gotten our server ready we're just going to run it by doing python3 server.pi and for Windows it's a different command so I'm going to put that on the screen as well so I'll hit enter and you can see that it says this is a development server do not use it in production deployment all right so if we go to 127.0.0.1 at Port 5000 I'm just going to copy this link and paste it into my URL bar it's going to say not found because we do not have a route set up for this endpoint we only have a route set up for forward slash API forward slash home right so what we need to do is go over here and do forward slash API and home and we can see our Json data right here and this is exactly what we've returned so what we're going to be doing in the coming Clips is to basically use our next.js front end to fetch this back-end route and grab the data that is sent from this route which is this right here and display it on the front and I'm going to be showing you how to do that so for right now I'll we can you know stop this back-end server for now and I'm just going to clear my terminal up and I'll be showing you guys how you can set up everything on the client side all right so to begin with the client side setup I'm going to open up my terminal and instead of being in server I'm going to first deactivate the environment for right now because we're not going to need to be playing around in our server directory quite yet um I'm going to go into client by doing CD dot dot forward slash client and here this will put me inside of our client directory as you can see right here and I'm just going to do npm run Dev so that I can have the client server running and it's going to be running on localhost 3000 so what we're going to do is go here and type in localhost 3000 to access our front end and what it currently looks like and for right now all we're going to do is just get rid of all this boilerplate code that nexgs provides us with so that we can start setting up our page to display this message right here so what I'm going to do is inside of client I'm going to go into pages okay and in Pages we're going to have three files and one folder called API for this video we're not going to need to mess around with this API folder so don't worry about this for app this is just going to return our app and then document.tsx this is just going to have all the setup stuff for next year's but the main file that we're going to be working with is index.tsx and here all I'm going to do is remove all of this code right by doing uh command a and command X for Windows there are different commands of course on the keyboard but just take out everything in this page and then do rfce now if you don't have the es7 Snippets extension over here I'd recommend installing um this right here this extension es7 Plus react Redux react native Snippets so that you're able to do that rfce um snippet to generate a functional component and if I go here you can see that all we have is index and next I'm going to go into globals.css and just remove all of this code right here I'm just going to keep the Tailwind stuff because we chose to use Tailwind with our project here you can see that we have a white background now and we just have index and our goal is to display hello world that's being called from this back end to the front end so to first start off with a few things I just want to import two things and I'm going to import use effect and use State and I'll explain to you guys what these mean but for right now this is all that we need for our client side now although we have the Imports for our client side set up there are two things that we need to sort out in our python file so the first thing is that we need to use flask cores and what cores is or what cores allows us to do is to make requests from this next JS server that's running right here to our python API okay and if we don't have cores then it's going to give us a cross origin issue and to avoid that issue we need course so that we are able to allow other servers to make requests to this endpoint right here okay I hope that's clear so to set up cores what we need to do is open up a new terminal and instead of being inclined we're going to exit out and go into server and here what I'm going to do is again since this is a new terminal I need to activate my virtual environment and here I'm just going to do pip3 install flask cores all right flask hyphen cores right there again the commands for Windows I've shown you that earlier so you can just use those again so now that we've successfully installed flash scores we're going to set it up by doing from class course import course and now to actually apply this to our python server we're just going to do cores and then pass in our app instance and that is it next we need to set our port to be equal to 8080 instead of being the default 5000 which we had right over here and you know if I refresh this it's not going to work because we don't have our backend server running currently but the next time that we do run it we're going to have to access it at 80 80 instead of 5000 and the reason that I'm doing 8080 is because I realized that as I was recording this um 5000 has an issue with cores um when create when sending requests from our front end so set it to 8080 and everything else is going to be the same okay so next I'm going to run my python server and to run our server we're just going to do python3 server.pi and here you can now see that it's saying running on 127.0.0.180. so here we're just going to go to the same URL and instead of having 5000 we're going to have 8080. you can see that the results are the exact same so next our goal is to retrieve this message here and log it to our console over here all right and once we've logged it then we know that the API requests are working and once they're working we can just display them onto the web page okay so to call this API what I'm going to do is go here and I'm going to first use use effect I'm not going to make any state variables just yet but I'm going to use these effect and if you don't know what use effect is I have a video on it which I will link in the top right hand corner for you to check out so that you can understand what use effect is but essentially it just allows us to create side effects in our functional components and I've just set one up here and I've passed in an empty array at the end so that this use effect function only runs once on the initial render of the component so what we need to do is do fetch and then pass in our URL which is going to be HTTP colon slash localhost 8080 API home now here's the thing you can type in localhost or do 127.0.0.1 I'm just doing localhost so it's easier for you guys to understand as well and if I type in localhost over here it's going to give us the same result essentially localhost and uh 127.0.0.1 are the same thing so it doesn't really matter you can use them interchangeably so I'll just do localhost 8080 API home and then once we fetch it all right I'm going to do a DOT then promise we're going to get the response that we get from the request put it into Json and then whatever data that we retrieve we're just going to console.log that data okay so now if we go to our friend and as you can see once I had saved my front end index TSX file right here you can see that the message was hello world and this is a response from the fetch API so we know that this message is being displayed now we need a way to display it on our web page so to do that we're going to create a state variable by doing a const message and send message initially we're going to have this set to loading and if you don't know what use state is I have a video on it as well and I'll link it in the top right hand corner for you guys to check out so we're going to have the initial value of message to be loading and once we've retrieved that data which is going to be the message itself we're going to set it to that data but for right now instead of displaying index we're just going to display a message okay and right now it's going to display loading because that's what we have but once we've fetched our API we're going to get the data and just do set message to data and here it's not going to work because it's going to say found object with keys message so what we're going to do is do data Dot message and this way it's only going to display the string of hello world so here you can see that we have Hello World showing up on our web page now if I go into my server and change hello world to being something else like subscribe to the YouTube channel and refresh this page you can see that that message is popping up so essentially what's happening is we first set up course to allow This next.js Server to make requests to our API and we have our Port running on 8080 all right and what we do is use the fetch API and call this endpoint which is localhost 8080 forward slash API forward slash home and then whatever response that the API returns we're going to put that to Json and then whatever data we retrieve we're going to set that message data to uh to access data.message and set that data.message to this message State variable and what this is going to do internally is once we retrieve the data itself so basically it's going to do we're going to have message here and messages initially set to loading right and then once data is retrieved message is set to data.message and in this case our message value is subscribed to the YouTube channel so if I refresh this it's going to show that on the back end and you can see on the front end as well now if I change this again and say like this video If this helped and refresh this page you can see that that is popping up and for a split second you will see loading while the API is being fetched so this is basically how you can make API calls to your python server now I did show you how you can make requests but it was a very simple example with just a string being displayed and you may be wondering how you'd be able to do this with a collection like a list or an array right so what I've done here is just added a people um key and have a list of names so Jack Harry and Barry that wasn't being too creative with that but just a list of people here and all we're going to do is display their names onto this webpage and if you're wondering how I did this all I did was simply have people and you know have the list of names and put this right after the message okay very simple um and after this what we're going to do is access the front end here and all we need to do is create a people variable So currently we're only setting the message to this message variable right but we need a people variable so we can set the people list right here because when we're fetching this API we're getting all of this data right here including people so we just need to have a variable that will contain our people so to do that we can just do const equal percent equal set the CU state I have this be an empty array um and we should be good after this we're just going to do set people to data people okay and then I'm just going to do console.log ated on people to make sure that we are retrieving our people so if I go here you can see that we retrieve Jack Harry and Barry Jack Harry and Barry like we were supposed to and next what we're going to do is display them onto our web page so to do that it's fairly simple as well I'm just going to remove this return statement for now I'll write a new one and here I'm just going to have a parent div and this first div is just going to contain a message and then our second date is going to be a mapping of our people to divs so we're just going to be people.net and we're going to take person and then take the index and then do a div tag I'm not sure why it's redlining here but let's see uh incompatible okay uh whoops okay so what we need to do actually is this right here people.map person index and then do div that undo uh person and then set the qt's index so do that here if we refresh our page you can see that we're displaying Jack Harry and Barry and just to go and reiterate over what this is doing and what this is doing what this is doing is first we're you know calling our API right like I explained earlier and getting all of this data right here and then we're just going to access the message which is going to be this right here and set that to our message variable and redefine it from loading to contain whatever message that is being sent from the back end and with people all we're doing is creating a people array using use State and setting the people to that array essentially and we're just accessing the People by doing data.people which can be accessed with this and like before you can change the names here so if I put in my own name and go ahead and refresh this you can see that my name is being rendered so yeah that's basically how it's working um I'm going to remove this console.log because we're not going to need it anymore and what this is doing is basically grabbing every single person that's in this people array and mapping each element to a parameter called person right which is going to be whatever this is right here okay whatever is inside of these quotes and displaying it and then this index is basically keeping track of which index so you know how in a list this would be 0 1 2 all this is doing is keeping track of the index and we're just going to assign the index to this key attribute for div and so once we do this we're displaying every single person that is inside of our people array so this is basically how you can set up a nexjs project combine it with a flask backend and make calls to your backend API to retrieve and display data all right so that is it for this video I hope you guys enjoyed and learned something and if you did make sure to leave a like And subscribe to the channel I apologize for lack of uploads I just had school and recently it ended so I'm going to be getting back into the groove of uploading so stay tuned for more uploads and if you have any sort of questions or comments or any issues you may have encountered when setting up this project make sure to leave them in the comments below and if you need to talk to me about anything just feel free to email me and I'll do my best to reply to you so with that being said hope you guys learned something hope you guys enjoyed thank you for the continued support and as always I will see you in the next video foreign [Music]

Channel: Arpan Neupane

Views: 18,693

Keywords: web development, flask, react, python tutorial, react tutorial, what are APIs, what are api's, programming tutorials, flask backend, react frontend, how to learn flask, how to learn react, how to learn python, how to build api, how to set up flask and react app, flask backend and react frontend, how to set up flask with react, how to set up react with flask, javascript tutorial, frontend and backend, flask and react tutorial, nextjs, nextjs and python, next.js, nextjs and flask

Id: OwxxCibSFKk

Length: 26min 44sec (1604 seconds)

Published: Thu Jun 15 2023