Flask + Angular base project

Flask Angular base project

To begin with any Salesforce integration projects we need any third-party service that will use SF API. In my case I stop my choice on Flask(Python) for backend and Angular for frontend. As for me Flask is the best solution for small services as it is small, modular and fast enough. As an option can be also Pyramyd and Django, but first is quite tricky and second one too big for simple projects. With Flask I can build first prototype quickly. I don't want to say other solutions are bad - the right choice is up to you (maybe I will try to build same project with Django latter and we can compare both approaches).

Flask - https://flask.palletsprojects.com/en/1.1.x/
it can be found in the Pallets Project resource (with many other useful libs) - https://palletsprojects.com/

Angular - https://angular.io/

Let start with project structure. We need to setup Flask server and also setup Angular sub-project.

1. Create new folder for Project.

BACKEND:

2.1. Create subfolder ./backend

2.2. Create minimal Flask app in ./backend/app.py - https://flask.palletsprojects.com/en/1.1.x/quickstart/#a-minimal-application
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'
2.3. Add .env file to the root project folder with content:
FLASK_APP="./backend/app.py"
FLASK_ENV="development"


2.4. Create Python environment with Pipenv - https://github.com/pypa/pipenv
pipenv --python 3.8

2.5. Open virtual environment
pipenv shell

2.6. Install Flask
pipenv install Flask

2.7. Run backend sub-project with command
flask run

You should see this magic page in your browser (http://localhost:5000/)
Flask blank project started

FRONTEND:

3.1. Create Angular environment - https://angular.io/guide/setup-local
ng new frontend

3.2. Move package.json, package-lock.json and node_modules folder from ./frontend folder to root project folder (./). (! It is be important for latter Heroku instance setup).

3.3. Fix ./package.json to run angular project from subfolder
replace
"start": "ng serve",
by
"start": "cd ./frontend && ng serve",

3.4. Fix relative path to node_modules folder in ./frontend/angular.json.

3.5. Initialize git repository in your project folder and create .gitignore file with root node_modules as the first item.
git init

3.6. Test angular sub-project with npm command
npm start
and if all is fine you should see this pretty page in your browser (http://localhost:4200/)

Angular blank project started


So there is nothing special in this post, but it is great basement for backend/frontend complex project. In next post I will describe steps to compile frontend into static resource and make it available from python side.









Comments

Post a Comment

Popular posts from this blog

HTTPS in local environment for Angular + Flask project.

Image
Sometimes it is important to run project in local environment with HTTPS. For example when you use third party authentication system in our app. In my case I prefer to have local instance similar as mush as possible to the production. Moreover, it’s easy to implement. First what you need is the ssl key. You can follow this article to create it https://devcenter.heroku.com/articles/ssl-certificate-self Create your ssl key in ./key project folder. Finally it should look like this [dmnbrest@~/Documents/myPython/blog2/project/key]$ ls server.crt server.csr server.key Add HTTPS support to the FLASK: Update init section in your backend server file ( ./backend/app.py ) this way if __name__ == "__main__":     context = ('./key/server.crt', './key/server.key')     app.run(ssl_context=context, host='0.0.0.0', debug=True) But now we need to run backend with other command python ./backend/app.py This time you should see this output in
Read more

Salesforce Authentication 2 (Token Validation and Refresh)

Image
In last article we added Salesforce connection setup logic to our application. Now we need to implement connection test logic and token refresh flow.  Connection test flow is a simple request to Salesforce API with access_token. If we receive valid response it means all works fine. In other case we should notify user about problems with Salesforce integration. I mentioned last time when we setup connection and receive response I save it to DB as is as it contains many useful information. And now we can use part of this response. Here is example of OAuth handshake response: { 'access_token': '00Dxxxxxxxxxx', 'refresh_token': '5Aezzzzzzzzzz', 'signature': '8KFGb34p3vMLhSRHHmJZN3Bux9tlcA1+cvgIACw2SG4=', 'scope': 'refresh_token api', 'instance_url': 'https://ap17.salesforce.com', 'id': 'https://login.salesforce.com/id/00D2x000003v71DEAQ/0052x000001S9ojAAC', 'toke
Read more

User authentification with Flask-Login

Image
One important step of project preparation is Security. We plan to publish our app to Heroku where it will be accessible by anyone in the world. Let's make it more secure with Flask-Login ( https://flask-login.readthedocs.io/en/latest/ ). There is one post I will follow. https://www.digitalocean.com/community/tutorials/how-to-add-authentication-to-your-app-with-flask-login But I will simplify it and will use login flow only at this moment as we don't need registration. But for new user creation I will add cli script. To add auth flow to our app we need to create Login View with Controller and some additional service methods for Flask-Login. Also we have to update User model a little bit. backend/models/user.py from models import db from flask_login import UserMixin class User(UserMixin, db.Model): __tablename__ = 'users' id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(255), unique=True, nullable=False) email
Read more