Flask + Webpack Starter

This repo's goal is to get your project up and running faster.
It uses Flask for the backend and Vue.js for the frontend, built with Webpack 4.

The backend flask structure and setup is André's Flask template project, thank you André! 😁

Getting started

To run this project, make sure you have Docker installed and running.

After creating a .env file with these variables:

APP_ENV=localhost
SECRET_KEY=<SECRET_KEY>
MONGO_DB=your_db_nam
MONGO_DB_TEST=your_test_db_name

Then, run the following command:

docker-compose build;
docker-compose run client npm i;
docker-compose up;

This will prepare the containers, install the dependencies, and then run the containers.

Ask someone from the dev team for the .env file.

By default, the Flask server runs on port 5005 and the WebPack server runs on 7001.

Visit http://localhost:7001/ and you should see the pages list.

If these ports are an issue for you, feel free to change the docker-compose.yml file to expose different ports. You only need to touch the published ports.

Flask Server

Running commands inside server

Enter python shell

docker-compose run server python manage.py shell

Frontend

Installing front-end dependencies using npm

To run any npm commands inside the container, prefix any npm command with

$ docker-compose run dev_client <npm-command>

Example: Installing Unbabel UI Library

$ docker-compose run dev_client npm i @unbabel/ui

This will run npm inside the container and save any package-lock.json changes back to the repo

Features

• Compiles Vue.js single file components
• Processes .scss files
• Is ready to test the frontend using Jest
• Has a dev mode that launches a server with livereload
• Has a production mode that compresses the files
• Lints the .vue and .js files
• Adds polyfills using Babel

Commands

• docker-compose run client npm run install to install the dependencies
• docker-compose run client npm run build to compile the assets for production
• docker-compose run client npm run lint to lint your files
• docker-compose run client npm run test to run the tests

The dev server is launched by composer automatically

• docker-compose run client npm run dev to launch a dev server with livereload

Folder structure

We kept the folder structure as flexible as possible, with some quick find and replaces to fix the paths you should be able to move stuff around. The /project/static/ will be populated with a dist folder with the files ready to be served by Flask.

Vue

The /project/static/src/ folder has 2 relevant folders:

• /apps/ — for big-ish applications, that are used in one place
• /components/ — for vue components that are used in multiple places, the LoadingSpinner is a good example, as it might be used in a UserSettings.vue app and in a UserSignup.vue app

This separation might seem overkill, and it might be, depending on the size of your project, but you can always scale it down.

Importing stuff on your .vue components

This starter project already has the Unbabel UI Library in its dependencies, you can import it on your Vue component using:

import { Modal, Button } from '@unbabel/ui';

for javascript, or for the styles:

@import '~@unbabel/ui/src/colors';

Sass

Inside the /project/static/src/scss/ folder is a possible structure that scales nicely. Put the elements/components that you use frequently inside the /components/, add the base styles to the /base/ folder and the page-specific styles to the /views/. For very small projects you can just compile the /project/static/src/scss/all.scss file and use that on all pages, but as soon as you get some complexity (for example if you have a user facing views and admin views), you probably should separate that, or compile each view .scss file.

Linking to the assets

Linking to static files

{{ url_for('static', filename='path-inside-project-static') }}

For example image/logo.png.

Linking to static files generated by WebPack

WebPack will build the files to the /project/static/dist folder.

Example:

For any WebPack entry in webpack.config.js you will get a file inside the /project/static/dist/js folder, plus any other files included in the js file, such as css, img, etc.

{{ url_for('static', filename='dist/js/main.bundle.js') }}

Testing

We are using Jest for all tests, with the help of the @vue/test-utils library to test Vue.js components more easily. There is an example file on the /project/static/tests/specs/ folder, that is ready to test Vuex store, if you have that in your apps.

Linting

There is really no reason why you shouldn't lint your files: it prevents bugs, makes projects inside the same organization consistent and maintains the overall sanity of the other humans who look at your code.

We use a slightly modified version of AirBnb's config, the biggest difference being the use of Tabs instead of Spaces.