Liya Gebre

Liya Gebre

1609752120

Vuejs Frontend for The Porygon Application

Porygon Web interface

VueJS web interface to manage a movies and series collection, along with categories, locations, and sorting.

Installation

Prerequisites

You need Node.JS (version 10 or later) to install the application, as well as the VueCLI package

The Porygon API must also be installed and be accessible, further instructions are available here

Install procedure

Install the VueCLI using npm (a global install is recommanded if you might have several Vue projects)

npm install -g @vue/cli

Then install the project using npm

npm install

Configuration

Application configuration

Most of the project configuration is ran using a single configuration file located in /src/config.js. It has the following structure:

export default {
  all: {
    porygonApiMinVersion: '0.4.1',
  },
  development: {
    porygonApiBaseUrl: 'http://localhost:4000/api/v1',
    porygonApiAuthentication: false,
  },
  production: {
    porygonApiBaseUrl: 'https://api.porygon.example.com',
    porygonApiAuthentication: true,
  },
};

The option porygonApiMinVersion allows to restrict the version of the Porygon API. You should not touch this value as it is automatically changed during development.

The options porygonApiVaseUrl and porygonApiAuthentication are both set for a production environment (using npm run serve --production or npm run build --production) or a dev environment (npm run serve.)

  • porygonApiBaseUrl should be the root path of your API (as defined during its configuration)

Typically, your dev environment is set to localhost without authentication, while your production environment should have an actual host with authentication enabled.

Authentication

TODO

Running the project

Dev mode

To run the project in development mode, configure it and run it using npm

npm run serve

By default, it should be accessible using http://localhost:8080

This behavior can be configured with vue.config.js, please refer to the official VueCLI documentation for further information

Production mode

To run in production mode, you can run it using npm.

npm run serve --production

However, this will still using a development server, and is not recommended for actual production use.

Build the production dist using npm

npm run build --production

You will have a dist directory that you should then serve using a web server, for instance nginxx

Here is a sample of an nginx configuration file adapted to this application. This configuration redirects all traffic through HTTPS:

server {
    listen 80;
    server_name porygon.example.com www.porygon.example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name porygon.example.com www.porygon.example.com;

    # include secured SSL config
    # this allows to reuse SSL configuration among several servers
    include /etc/nginx/snippets/ssl.conf;

    # include security_headers
    # some headers can be reused, but Content-Security-Policy must be adapted to your server
    include /etc/nginx/snippets/security_headers.conf;
    add_header Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline' https://maxcdn.bootstrapcdn.com https://fonts.googleapis.com; font-src https://maxcdn.bootstrapcdn.com https://fonts.gstatic.com; script-src 'self'; connect-src https://api.porygon.example.com; 'self'";

    # add custom config
    location / {
        root /var/www/sites/porygon-frontend/;
        try_files $uri $uri/ /index.html =404;
    }

    ssl_trusted_certificate /etc/letsencrypt/live/porygon.example.com/fullchain.pem;
    ssl_certificate /etc/letsencrypt/live/porygon.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/porygon.example.com/privkey.pem;

}

This is just an example, and you should refer to the various documents available to ensure you have a corect configuration.

Docker

A docker image is available with a preconfigured server. It can be ran using

docker run -p 4000:80 --name porygon_frontend -v /var/log/porygon-frontend/:/var/log/nginx ahugues/porygon-frontend:latest

This will bind the logs directory to /var/log/porygon-frontend and listen on port 4000. However this does not prevent from using the full nginx proxy as this version is not protected.

Run the tests

If you want to run the unit and e2e tests, use npm:

npm run test:unit
npm run test:e2e

Contributing

Contributions are closed at the moment.

Download Details:

Author: aHugues

Source Code: https://github.com/aHugues/porygon-frontend

#vue #vuejs #javascript

What is GEEK

Buddha Community

Vuejs Frontend for The Porygon Application

Hire Frontend Developers

Create a new web app or revamp your existing website?

Every existing website or a web application that we see with an interactive and user-friendly interface are from Front-End developers who ensure that all visual effects come into existence. Hence, to build a visually appealing web app front-end development is required.

At HourlyDeveloper.io, you can Hire FrontEnd Developers as we have been actively working on new frontend development as well as frontend re-engineering projects from older technologies to newer.

Consult with experts: https://bit.ly/2YLhmFZ

#hire frontend developers #frontend developers #frontend development company #frontend development services #frontend development #frontend

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer

Ahebwe  Oscar

Ahebwe Oscar

1623148379

Django + Vue3 — The Best of Both Frontends

In the previous articles of this series, I’ve demonstrated a method of integrating Django templates and Vue in such a way that preserves the strengths of both frontend frameworks.

Since those articles were published, Vue3 has been released, bringing a variety of improvements and a list of breaking changes. With these numerous changes, the code examples from the prior articles in this series no longer work directly with Vue3. But happily, with only a few isolated changes, the same general approach works well with Vue3 and, moreover, the code becomes, in my opinion, simpler. In fact, we need not alter our components, our Vuex stores, or even our vue.config.js to work with Vue3. Rather, the required changes are limited to the app initialization logic.

Instead of rehashing the ideas and approach described in prior articles of this series, this article will instead enumerate the changes needed to adapt the Vue2 solution to Vue3. At the same time, I’ll introduce a couple of additional changes that, while not strictly necessary for Vue3, improve the overall quality of the Vue + Django integration.

If you’re just starting with Vue + Django, I suggest reading from the start of these articles to learn more about the general approach utilized in this article. Or, to start hacking immediately, check out the sample application source code.

Overview of changes

In Vue2, app initialization was generally done with new Vue() constructor. However, this approach was eliminated in Vue3, so instead we will adapt the code to use the new createApp() method. Similarly, we no longer can instantiate the Vuex store with new Vuex.store() but will instead use createStore().

Both these changes are straightforward adaptations based on the Vue migration guide.

However, our usage with Django necessitates a couple additional changes. First, we must provide for passing of properties from Django template, as our previous approach, which relied on new Vue(), no longer works. Second, as we may potentially be adding several Vue apps to a single page, it behooves us to extract our app/store creation logic into a callable function.

#vuejs #django #django + vue3 — the best of both frontends #both frontend #vue3 #best of both frontends

Vuejs Frontend for The Porygon Application

Porygon Web interface

VueJS web interface to manage a movies and series collection, along with categories, locations, and sorting.

Installation

Prerequisites

You need Node.JS (version 10 or later) to install the application, as well as the VueCLI package

The Porygon API must also be installed and be accessible, further instructions are available here

Install procedure

Install the VueCLI using npm (a global install is recommanded if you might have several Vue projects)

npm install -g @vue/cli

Then install the project using npm

npm install

Configuration

Application configuration

Most of the project configuration is ran using a single configuration file located in /src/config.js. It has the following structure:

export default {
  all: {
    porygonApiMinVersion: '0.4.1',
  },
  development: {
    porygonApiBaseUrl: 'http://localhost:4000/api/v1',
    porygonApiAuthentication: false,
  },
  production: {
    porygonApiBaseUrl: 'https://api.porygon.example.com',
    porygonApiAuthentication: true,
  },
};

The option porygonApiMinVersion allows to restrict the version of the Porygon API. You should not touch this value as it is automatically changed during development.

The options porygonApiVaseUrl and porygonApiAuthentication are both set for a production environment (using npm run serve --production or npm run build --production) or a dev environment (npm run serve.)

  • porygonApiBaseUrl should be the root path of your API (as defined during its configuration)

Typically, your dev environment is set to localhost without authentication, while your production environment should have an actual host with authentication enabled.

Authentication

TODO

Running the project

Dev mode

To run the project in development mode, configure it and run it using npm

npm run serve

By default, it should be accessible using http://localhost:8080

This behavior can be configured with vue.config.js, please refer to the official VueCLI documentation for further information

Production mode

To run in production mode, you can run it using npm.

npm run serve --production

However, this will still using a development server, and is not recommended for actual production use.

Build the production dist using npm

npm run build --production

You will have a dist directory that you should then serve using a web server, for instance nginxx

Here is a sample of an nginx configuration file adapted to this application. This configuration redirects all traffic through HTTPS:

server {
    listen 80;
    server_name porygon.example.com www.porygon.example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name porygon.example.com www.porygon.example.com;

    # include secured SSL config
    # this allows to reuse SSL configuration among several servers
    include /etc/nginx/snippets/ssl.conf;

    # include security_headers
    # some headers can be reused, but Content-Security-Policy must be adapted to your server
    include /etc/nginx/snippets/security_headers.conf;
    add_header Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline' https://maxcdn.bootstrapcdn.com https://fonts.googleapis.com; font-src https://maxcdn.bootstrapcdn.com https://fonts.gstatic.com; script-src 'self'; connect-src https://api.porygon.example.com; 'self'";

    # add custom config
    location / {
        root /var/www/sites/porygon-frontend/;
        try_files $uri $uri/ /index.html =404;
    }

    ssl_trusted_certificate /etc/letsencrypt/live/porygon.example.com/fullchain.pem;
    ssl_certificate /etc/letsencrypt/live/porygon.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/porygon.example.com/privkey.pem;

}

This is just an example, and you should refer to the various documents available to ensure you have a corect configuration.

Docker

A docker image is available with a preconfigured server. It can be ran using

docker run -p 4000:80 --name porygon_frontend -v /var/log/porygon-frontend/:/var/log/nginx ahugues/porygon-frontend:latest

This will bind the logs directory to /var/log/porygon-frontend and listen on port 4000. However this does not prevent from using the full nginx proxy as this version is not protected.

Run the tests

If you want to run the unit and e2e tests, use npm:

npm run test:unit
npm run test:e2e

Contributing

Contributions are closed at the moment.

Download Details:

Author: aHugues

Source Code: https://github.com/aHugues/porygon-frontend

#vue #vuejs #javascript

Liya Gebre

Liya Gebre

1609752120

Vuejs Frontend for The Porygon Application

Porygon Web interface

VueJS web interface to manage a movies and series collection, along with categories, locations, and sorting.

Installation

Prerequisites

You need Node.JS (version 10 or later) to install the application, as well as the VueCLI package

The Porygon API must also be installed and be accessible, further instructions are available here

Install procedure

Install the VueCLI using npm (a global install is recommanded if you might have several Vue projects)

npm install -g @vue/cli

Then install the project using npm

npm install

Configuration

Application configuration

Most of the project configuration is ran using a single configuration file located in /src/config.js. It has the following structure:

export default {
  all: {
    porygonApiMinVersion: '0.4.1',
  },
  development: {
    porygonApiBaseUrl: 'http://localhost:4000/api/v1',
    porygonApiAuthentication: false,
  },
  production: {
    porygonApiBaseUrl: 'https://api.porygon.example.com',
    porygonApiAuthentication: true,
  },
};

The option porygonApiMinVersion allows to restrict the version of the Porygon API. You should not touch this value as it is automatically changed during development.

The options porygonApiVaseUrl and porygonApiAuthentication are both set for a production environment (using npm run serve --production or npm run build --production) or a dev environment (npm run serve.)

  • porygonApiBaseUrl should be the root path of your API (as defined during its configuration)

Typically, your dev environment is set to localhost without authentication, while your production environment should have an actual host with authentication enabled.

Authentication

TODO

Running the project

Dev mode

To run the project in development mode, configure it and run it using npm

npm run serve

By default, it should be accessible using http://localhost:8080

This behavior can be configured with vue.config.js, please refer to the official VueCLI documentation for further information

Production mode

To run in production mode, you can run it using npm.

npm run serve --production

However, this will still using a development server, and is not recommended for actual production use.

Build the production dist using npm

npm run build --production

You will have a dist directory that you should then serve using a web server, for instance nginxx

Here is a sample of an nginx configuration file adapted to this application. This configuration redirects all traffic through HTTPS:

server {
    listen 80;
    server_name porygon.example.com www.porygon.example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name porygon.example.com www.porygon.example.com;

    # include secured SSL config
    # this allows to reuse SSL configuration among several servers
    include /etc/nginx/snippets/ssl.conf;

    # include security_headers
    # some headers can be reused, but Content-Security-Policy must be adapted to your server
    include /etc/nginx/snippets/security_headers.conf;
    add_header Content-Security-Policy "default-src 'self'; style-src 'self' 'unsafe-inline' https://maxcdn.bootstrapcdn.com https://fonts.googleapis.com; font-src https://maxcdn.bootstrapcdn.com https://fonts.gstatic.com; script-src 'self'; connect-src https://api.porygon.example.com; 'self'";

    # add custom config
    location / {
        root /var/www/sites/porygon-frontend/;
        try_files $uri $uri/ /index.html =404;
    }

    ssl_trusted_certificate /etc/letsencrypt/live/porygon.example.com/fullchain.pem;
    ssl_certificate /etc/letsencrypt/live/porygon.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/porygon.example.com/privkey.pem;

}

This is just an example, and you should refer to the various documents available to ensure you have a corect configuration.

Docker

A docker image is available with a preconfigured server. It can be ran using

docker run -p 4000:80 --name porygon_frontend -v /var/log/porygon-frontend/:/var/log/nginx ahugues/porygon-frontend:latest

This will bind the logs directory to /var/log/porygon-frontend and listen on port 4000. However this does not prevent from using the full nginx proxy as this version is not protected.

Run the tests

If you want to run the unit and e2e tests, use npm:

npm run test:unit
npm run test:e2e

Contributing

Contributions are closed at the moment.

Download Details:

Author: aHugues

Source Code: https://github.com/aHugues/porygon-frontend

#vue #vuejs #javascript