DEV Community

NicolasArayaB for 4GeeksAcademy

Posted on

Deploy en Heroku

Utilizando el boilerplate react-flask-hello, realizar el deploy de tu applicación es bastante simple.

  • Lo primero es crear una cuenta en Heroku
  • Una vez tengas la cuenta, instalas heroku:
  $ npm i heroku -g
Enter fullscreen mode Exit fullscreen mode
  • Crea la app en heroku:
  $ heroku create <your_application_name>
Enter fullscreen mode Exit fullscreen mode
  • Agregas Python y Node.js para poder usar npm en producción:
  $ heroku buildpacks:add --index 1 heroku/python
  $ heroku buildpacks:add --index 2 heroku/nodejs
Enter fullscreen mode Exit fullscreen mode
  • Agregas una base de datos. Para esto, puedes revisar aca cual es la opción que se adecua mejor a tus necesidades. En el caso de MySQL, puedes usar JawsDB MySQL ya que da una opción gratis de la siguiente manera:
   heroku addons:create jawsdb:kitefin
Enter fullscreen mode Exit fullscreen mode

Si utilizas PostgreSQL, puedes utilizar Heroku Postrgres:

  $ heroku addons:create heroku-postgresql:hobby-dev
Enter fullscreen mode Exit fullscreen mode
  • Si estas utilizando PostgreSQL, debes realizar un paso extra. Debido a que se genera automaticamente la 'DATABASE_URL' con el paso anterior, debemos agregar en /src/app.py, .replace("://", "ql://", 1) de esta manera:
  # database configuration
  if os.getenv("DATABASE_URL") is not None:
    app.config['SQLALCHEMY_DATABASE_URI'] = 
  os.environ.get('DATABASE_URL').replace("://", "ql://", 1)
  else:
Enter fullscreen mode Exit fullscreen mode
  • Luego agregamos el resto de las variables del archivo .env de la siguiente forma:
  $ heroku config:set FLASK_APP_KEY="any key works"
  $ heroku config:set FLASK_APP=src/app.py
                   # Importante: En archivo .env está en 
                     development, heroku hay que setearlo para 
                     producción     ↓
  $ heroku config:set FLASK_ENV=production 
  $ heroku config:set BASENAME=/
                   # Importante: Esta variable tiene que     
                     quedar vacia   ↓
  $ heroku config:set BACKEND_URL=
Enter fullscreen mode Exit fullscreen mode
  • Si tienes cambios pendientes, solo guarda y ya estas listo para hacer el deploy:
  $ git add .
  $ git commit -m 'deploying to heroku'
  $ git push heroku main
Enter fullscreen mode Exit fullscreen mode

Top comments (0)