Skip to content

VueJS Service

Jump to bottom
Constantin edited this page Feb 28, 2021 · 6 revisions

TL DR; How the VueJS Frontend is working and what did we change

Lifecycle of the VueJS Frontend

  • Installing NPM packages. Usually with yarn

  • Populate the .env file. More details here

  • Now you can serve the app

  • Start serving the app with yarn serve

    • Note: serve-ing the frontend is not designed for production, i.e. it shares source maps and non minified code. In big lines, this command does: (what we know / reverse engineered)

    • This command starts the VueJS Frontend (with its respective nodeJS backend) with the help of the vue-cli-service which does a few more things because web is web and you need to compile TS code into JS.

      1. Compilation steps (that we know of / reverse engineered)

        • Vue cli stores somewhere the compiled JS and source maps.
        • It uses babel to polyfill JS code for older browsers. What polyfill is: Polyfill

      2. After compilation, it starts preloading some settings, some of them are:

      • Sets environment variables. The precedence is:
        1. Command line argument environment variable
        2. Environment variable specified in .env file
        3. Previously set environment variables (similar to if you type ENV_VAR=something before you run anything)
        4. Maybe some shady defaults the Vue framework has? But not for everything of course
      1. Finally, the TypeScript code you wrote is being executed. Good luck!

How .env and Environment variables work:

What they are

Environment variables are values that your shell remembers for you, or if you are in a program, can query the operating system to tell you for example "hey what operating system is this?" (e.g. the OS variable on most POSIX systems).

How we use them

Because running the app in production is different than just developing or testing, we also want to control our code without rewriting code or having to recompile it just to hide some prints. This is where environment variables come in. You can know programmatically if you are in "production" or "development", and also many other "settings"

In the frontend and backend folders of our project, we use a standard way to store environment variables, which is in a file named .env in the top-level directory. (Sibling to package.json for example)

  • When we talk about environments, we mainly talk about development and production environments. Although a sometimes test is also used.

Development tip:

  • For rapid switching between environments or if you just want to write them once and then be able to set them easily, just write the files .env.prod and .env.dev and place them in the same env folder with the samples. After you are done writing the secrets and the rest of the variables, you can use commands yarn set-env-prod and yarn set-env-dev that simply copy your .env.<environ> file to overwrite the .env file at the root of the frontend project

Clone this wiki locally