Deploy a React + Flask Project to Production

Поділитися
Вставка
  • Опубліковано 10 гру 2024

КОМЕНТАРІ • 100

  • @mkroven
    @mkroven 4 роки тому +31

    Thank you. You should be the most wanted teacher at courses.

  • @Pouckimon
    @Pouckimon 2 роки тому +1

    Thank you Miguel for for videos on React + Flask. You have been a huge help for my development journey and want you to show my appreciation.

  • @mark0tz
    @mark0tz 4 роки тому +8

    Your pacing is excellent. I really appreciate the level of depth you provide as you explain your reasoning along the way and that you keep the focus on the current project. Clean video, too, that is very relatable and easy to follow. Thanks for posting this!

  • @aishwaryamalgonde483
    @aishwaryamalgonde483 4 роки тому +3

    I was able to send react and flask to production in about half an hour!! This video is great!!

  • @Felipe-53
    @Felipe-53 4 роки тому +4

    Thank you so much again. It's just so great to be able to learn from someone with your level of expertise. I'm grateful for that and I hope your channel and your work gets the attention it deserves.

  • @smarkbark
    @smarkbark 2 роки тому

    Thank you so much for this video Miguel! I was able to use your examples with my existing configuration and now I can finally use React with my Flask website! I cannot thank you enough for this tutorial!!!

  • @snehpatel2276
    @snehpatel2276 3 роки тому

    It's been said a lot in the comments but let me just repeat it, thanks so much! Your tutorial helped me make my first production app

  • @juanluisavilamontoya5951
    @juanluisavilamontoya5951 Рік тому

    Great tutorial. Thw way you do it is perfect. Thank you from Colombia

  • @akmalazizul2057
    @akmalazizul2057 3 роки тому

    Thank you for such a great and in-depth tutorial. Really helped me with the current project that I'm working on.

  • @ТаняМатвеева-н9ъ
    @ТаняМатвеева-н9ъ 5 місяців тому

    the best explanation i`ve managed to find!

  • @rudeadyet1992
    @rudeadyet1992 4 роки тому +1

    Hi @Miguel, I found this tutorial very useful and professional. Since you mentioned you do have a separate tutorial on setting up SSL, but I could not find the SSL setup for Nginx on your youtube channel.

  • @firetimeinit
    @firetimeinit 9 місяців тому

    this is such a wealth of knowledge

  • @russici
    @russici 4 роки тому +2

    Miguel, thanks a lot for your efforts! It would be very helpful to see the deployment of this app with a Docker.

    • @miguelgrinberg
      @miguelgrinberg  4 роки тому +1

      The idea is the same, just learn the two approaches I show in this video and implement the one you like best in Docker. It works in the same way. I can't possibly provide a complete ready to copy/paste solution for the million+ possible ways to deploy, as I mention in the video.

  • @nebn.
    @nebn. Рік тому

    Thank you

  • @antonyinjila7152
    @antonyinjila7152 4 роки тому +2

    Miguel you are the best

  • @huzaifavakil7352
    @huzaifavakil7352 4 роки тому

    Thank you so much, sir. You are an amazing teacher.... I have learned flask only because of you... Please keep uploading such content

  • @z51racer
    @z51racer 4 роки тому

    Thank you so much. This is great information and I really enjoy your style of conveying it.

  • @branmuller
    @branmuller Рік тому

    Michael thanks this is an amazing video that helped me deploy my app

  • @hakihaki1368
    @hakihaki1368 2 роки тому

    Great Job! Big thanks to YOU!

  • @MrDima123123
    @MrDima123123 2 роки тому

    Very good tutorial . Thanks!

  • @suharsh96
    @suharsh96 4 роки тому +1

    You are amazing man, thank you for your work !

  • @Septem_150
    @Septem_150 4 роки тому

    Thanks for your work, Miguel.

  • @neurolab4800
    @neurolab4800 10 місяців тому

    good start thank you MIguel!

  • @dujingchainghoo7875
    @dujingchainghoo7875 4 роки тому +1

    Thank you sir, I’ ll encourage you.

  • @dmbrv
    @dmbrv 2 роки тому

    Sir, You Rock.

  • @scottcurry3767
    @scottcurry3767 3 роки тому

    Awesome stuff, thanks for posting!!

  • @playgoods
    @playgoods 4 роки тому +1

    Of course we want to see you again
    I would like to ask about the possibility of other training, such as Mega tutorial

  • @fhatuwaniluvhengo9900
    @fhatuwaniluvhengo9900 3 роки тому

    Thank you for this amazing tutorial

  • @pablomotta___
    @pablomotta___ 4 роки тому +1

    So good! Thank you so much! Would you consider adding a database part to this project? Maybe Postgres? Also, I'd love to learn more about continuous deployment and deploying on AWS.

    • @miguelgrinberg
      @miguelgrinberg  4 роки тому

      I have written extensively about databases. Check my blog out!

  • @whosdavidce
    @whosdavidce 4 роки тому

    Awesome, thank you so much!

  • @usf4886
    @usf4886 2 роки тому

    11:20 option two - nginx

  • @nalladileepreddy1436
    @nalladileepreddy1436 4 роки тому

    Thank you sir it is excellent tutorial

  • @38cortestrezoitao38
    @38cortestrezoitao38 4 роки тому

    God bless, from Brazil!

  • @juhwaannnLim
    @juhwaannnLim 4 роки тому

    Thank you!! This video helped me.

  • @sharunkumar4806
    @sharunkumar4806 4 роки тому

    Hello Sir, I am glad to have found a great instructor like you.
    Your course on flask that is available on Udemy is great.
    I have a strong recommendation.
    There is no good standalone course on Django available on Udemy.
    Please can you prepare and release a course on Django.
    It's a kind request 🙏

  • @michaels8297
    @michaels8297 3 роки тому

    thank you again!

  • @tonkyboy8920
    @tonkyboy8920 2 роки тому

    Hey @Miguel, thanks for your video.
    I use Browser router in React to server multiple sites. Unfortunately, this way my routes don't work anymore, just the "/" route.
    When i use it on a node.js they work.
    You maybe a have a further suggestion how to use with multiple sites in react?
    regards

  • @jetra_h
    @jetra_h 4 роки тому

    Thanks Miguel

  • @davidmasterson4329
    @davidmasterson4329 2 роки тому

    Miguel great video. I set everything up with the addition of adding SSL for my nginx. I am however, not getting anything from my backend other than the static files. Any suggestions?😀

  • @movie8966
    @movie8966 4 роки тому

    Thank you my Teacher

  • @wduandy
    @wduandy 3 роки тому

    It is possible to configure the injection of the link href on React at the index.html to have the {{ url_for('static', like variable already set?

  • @mattamell
    @mattamell 2 роки тому

    Thank you kind sir

  • @sindhusindhu6599
    @sindhusindhu6599 4 роки тому +1

    Awesome .. if possible try node instead of nginx

    • @miguelgrinberg
      @miguelgrinberg  4 роки тому

      I'm very happy using nginx. As I said in the video, there are about a million different ways to deploy. Learn the concepts I'm showing you, then if you prefer, replace nginx with node.

  • @amazingguo
    @amazingguo 4 роки тому

    Thank you so much for making such a wonderful tutorial!!!

  • @parikshitmukherjee3663
    @parikshitmukherjee3663 2 роки тому

    Very nicely explained. Thanks for sharing. By the way, did you use local machine for the development part (1st part) and a server for the deployment part (2nd part) or you did it in the server itself. Also want to know whether you have changed the proxy setting in JSON file before deployment or kept as it is.

    • @miguelgrinberg
      @miguelgrinberg  2 роки тому +1

      This was all done in the server for convenience. The proxy setting is not used in a production deployment.

  • @aplombsunny
    @aplombsunny 4 роки тому

    Thanks Miguel for wonderful video. I have a question, how to handle multi-threading in flask app on production server?

    • @miguelgrinberg
      @miguelgrinberg  4 роки тому +1

      Use a production server that supports multi-threading. This has really nothing to do with Flask, and everything to do with the web server you choose. Both Gunicorn and uWSGI can be configured with multithreading.

  • @nirobsarkar2926
    @nirobsarkar2926 4 роки тому

    can you please show deployment flasky app with celery, socket and radis in ec2 .how to auto restart radis when flasky reload when update some code

  • @mudassiraqeel8604
    @mudassiraqeel8604 Рік тому

    please complete this deployment by adding an ssl certificate video, for eg. let's encrypt with nginx

  • @william3588
    @william3588 4 роки тому

    Awesome!

  • @rdubitsk
    @rdubitsk 3 роки тому

    Another awesome video! Would the nginx aspect change at all for a heroku deployment?

    • @miguelgrinberg
      @miguelgrinberg  3 роки тому +1

      You wouldn't use nginx at all when deploying to Heroku.

  • @learnnow9598
    @learnnow9598 3 роки тому

    Sir how to host a production flask backend website which can handle a 500k concurrent requests per sec? Can we use nginx for it?

  • @huzaifavakil7352
    @huzaifavakil7352 4 роки тому

    Sir, I have deployed my website using the first method...but my react routings are not working ...

  • @reliable_tech_innovations
    @reliable_tech_innovations 3 роки тому

    Would this work for me trying to deploy a react and flask app to cpanel? (hostgator)

  • @zaddy420
    @zaddy420 2 роки тому

    Thanks Bro

  • @minamortchev4271
    @minamortchev4271 3 роки тому

    Hi! Thank you so much for this it is so helpful!! Just a question, at one point you type a URL into a web browser, I'm not sure where to find one for my project? Or how to make one? Thank you!!

    • @miguelgrinberg
      @miguelgrinberg  3 роки тому

      The URL is for a domain that I own. If you want to have your own domain you have to purchase one, and then configure it to point to your server.

  • @snehpatel9203
    @snehpatel9203 3 роки тому

    Quick question! Would installing certbot and running the frontend using HTTPS mess with the ability of the backend to communicate with the frontend in a configuration such as this?

    • @miguelgrinberg
      @miguelgrinberg  3 роки тому +1

      No. You should run HTTPS also for your API though. It is actually more important on the API than on the front end files.

  • @user-mr4bx7dx3y
    @user-mr4bx7dx3y Місяць тому

    I'm sorry, there's something I don't understand. I have created my routes for the backend, which according to the video have to be api/something. That's clear. Then for the frontend I've been using local host. This means I need to change all my routes to match the backend ones removing that localhost I was using during the development? I don't know if you will see this after so long so if someone could help, I'd really appreciate it.

    • @miguelgrinberg
      @miguelgrinberg  Місяць тому

      @@user-mr4bx7dx3y you didn't have to specify a hostname in your client. If you use /api/xxx as URL the browser will use the same domain you are on. That should make the same code work for dev and prod.

  • @gatocode316
    @gatocode316 4 роки тому

    Niceee, thanks

  • @mehmetgulsoy3037
    @mehmetgulsoy3037 4 роки тому +1

    thank you Miguel.

  • @HisMajesty99
    @HisMajesty99 4 роки тому +1

    How would I do this on IIS?

    • @miguelgrinberg
      @miguelgrinberg  4 роки тому

      I don't use IIS, so I cannot help you there.

  • @saisasank
    @saisasank 3 роки тому

    Sir, I have been trying to find the post that describes about "securing our servers" in your blog, that you have mentioned about in this video tutorial. But I could not find it. Can you please leave the link for same please? I am doing my master thesis at the moment, and this would be a very good help.

    • @miguelgrinberg
      @miguelgrinberg  3 роки тому +1

      This is in the Linux deployment chapter of the mega tutorial.

    • @saisasank
      @saisasank 3 роки тому

      @@miguelgrinbergoh okay. Is it paid course?

    • @miguelgrinberg
      @miguelgrinberg  3 роки тому

      @@saisasank no, it's on my blog!

  • @colinmanko7002
    @colinmanko7002 4 роки тому

    Thanks for the video! Expanding on your first deployment method, I have made several routes in my react frontend. How would I route, say a /checkout page? What I've tried is:
    @app.route("/checkout")
    def checkout():
    return app.send_static_file("index.html")
    I'm not seeing another file in the build directory that would be responsible for its separate html. But, with the above code is I return the same html as my home page. Thanks for taking a look. And, thanks for the video!

    • @colinmanko7002
      @colinmanko7002 4 роки тому

      I might be answering my own question here.. I had a fundamental understanding of what react does/is. It’s all served from one page. You can serve from other pages, but you might benefit from a different framework at that point

    • @miguelgrinberg
      @miguelgrinberg  4 роки тому

      Did you see the 3rd video in this series? It is specifically dedicated to adding support for client-side routes.

    • @colinmanko7002
      @colinmanko7002 4 роки тому

      @@miguelgrinberg Oh amazing. no, I did not. What a great series. Thank you

  • @sheldenshi8367
    @sheldenshi8367 3 роки тому

    Hi Miguel, I am wondering how you set up the personalized URL

    • @miguelgrinberg
      @miguelgrinberg  3 роки тому

      Do you mean the "demobox" URL? It's a standard subdomain on my own domain. When you buy a domain your provider will give you a configuration page where you can edit your DNS, including adding subdomains.

    • @sheldenshi8367
      @sheldenshi8367 3 роки тому

      ​@@miguelgrinberg I have a domain. How do I set it up like yours where after I deploy it, I can find it on a subdomain. Or it would be great if there is a video or blog you could direct me :)

    • @miguelgrinberg
      @miguelgrinberg  3 роки тому

      @@sheldenshi8367 You have to ask your domain provider how to set up a subdomain.

  • @nickweimer6126
    @nickweimer6126 4 роки тому

    Hi, thank you for a very helpful tutorial! Is this information useful for deploying to AWS easily? Perhaps using Elastic Beanstalk? Thanks, Nick

    • @miguelgrinberg
      @miguelgrinberg  3 роки тому

      I don't use ElasticBeanstalk so you'll have to adapt my instructions to that platform. Consider that you have two projects the deploy, the front-end, which is just a bunch of static HTML/CSS/JS files, and the back-end, which is the Python API. You should be able to find lots of tutorials that are specific to ElasticBeanstalk for these.

    • @nickweimer6126
      @nickweimer6126 3 роки тому

      @@miguelgrinberg Thank you! +1 Patron Glad to support

    • @miguelgrinberg
      @miguelgrinberg  3 роки тому

      @@nickweimer6126 Thank you so much!

  • @mazhengxing11
    @mazhengxing11 Рік тому

    big help!!!

  • @rakesh11911
    @rakesh11911 4 роки тому

    Hi Miguel. i am using the first approach and trying to deploy on a Python Web Server as this is a very small project. when i try to run the app it just return the empty page. the index file is however loaded(the title of the page shows as `react app`) but page itself is blank. i am sure i am missing something silly. can you help me identify what i could be doing wrong.
    these are the changes i made - changed argumnets to app = Flask(__name__, static_folder='../build', static_url_path='/')
    added route -
    @app.route('/')
    def index():
    return app.send_static_file('index.html')
    localhost:3000/ - returns react page(works)
    localhost:5000/api/time - return current Unix time (works)
    localhost:5000/ - returns index.html with title `react app` but page is blank

    • @miguelgrinberg
      @miguelgrinberg  4 роки тому

      Look in the browser's network tab to see what static files aren't working, then check the build directory to see why those files aren't there.

    • @Septem_150
      @Septem_150 4 роки тому

      @@miguelgrinberg I'm also having this same issue. The build directory is showing those files as being present but still it says 404 in the console.

    • @Septem_150
      @Septem_150 4 роки тому

      @@miguelgrinberg I fixed it by setting permissions of the static folder to 755. For some reason, building with "yarn build" makes the static folder have permissions of 700, which makes the usergroup nginx uses not be able to read the contents.

  • @segue97
    @segue97 4 роки тому

    Good morning Miguel from Lagos, Nigeria.
    Please can you make a video on how to serve a vuejs app using a flask backend api?
    Thanks

    • @miguelgrinberg
      @miguelgrinberg  4 роки тому +2

      Learn how I do it with React, then apply the same technique to your Vue project. It's really very similar.

  • @rudeadyet1992
    @rudeadyet1992 4 роки тому

    Hi @Miguel, I found this tutorial very useful and professional. Since you mentioned you do have a separate tutorial on setting up SSL, but I could not find the SSL setup for Nginx on your youtube channel.

    • @miguelgrinberg
      @miguelgrinberg  4 роки тому +3

      It's a written tutorial on my blog.

    • @rudeadyet1992
      @rudeadyet1992 4 роки тому

      Miguel Grinberg Found it. Thanks heaps!

  • @rudeadyet1992
    @rudeadyet1992 4 роки тому

    Hi @Miguel, I found this tutorial very useful and professional. Since you mentioned you do have a separate tutorial on setting up SSL, but I could not find the SSL setup for Nginx on your youtube channel.