Code Monkey home page Code Monkey logo

lagosta's Introduction

GitHub Actions Build Status

Lagosta

Lagosta is the user interface for Krill.

The project uses Vue.js as Javascript framework and Element as UI framework.

Requirements

  • Node.js
  • yarn or npm

Note that yarn requires installing an extra dependency, whereas npm is included with node.js. OTOH if you use npm you should make sure to commit package-lock.json to the repository.

Project setup

To get all the required js libraries in, run

yarn install

or

npm install

Running a Development Server

Vue uses webpack and webpack-dev-server to run a auto-compiling, hot-reloadable development server and Krill is no exception.

You can start the development server by issuing:

npm run serve

Most of the settings for the development server are specified in the file /vue.config.js.

You can choose the IP Address and the port to run the Krill development server on:

    port: "3003",
    https: true

You can use the proxy setting for webpkack-dev-server to reroute the HTTP requests to your local Krill instance. Edit the /vue.config.js file by specifying the proxy option.

This will forward the requests for that particular endpoint to your local Krill instance. Note that you'll have the reroute the /api, /auth and /stats endpoints to Krill.

For example:

...
  devServer: {
    // Krill proxy instance (for API calls).
    // see: https://webpack.js.org/configuration/dev-server/#devserverproxy
    proxy: {
      "/api": { target: "https://localhost:3000" },
      "/auth": { target: "https://localhost:3000" },
      "/stats": { target: "https://localhost:3000" }
    },
...

In this example a local Krill instance is running on https://localhost:3000 (The default in the krill config).

You can read more about webpack-dev-server here.

Creating a build for deployment

To get everything compiled and minified in the /dist folder, you can run:

yarn run build

or

npm run build

This will compile and minify all JS and CSS. Again, since Vue uses webpack you can modify a lot of settings for the build process.

See the https://webpack.js.org/concepts/.

Routing API requests in Production

There are two ways to run the app in production:

  • Configure your webserver to proxy all the calls for /api, /stats and /auth to the Krill daemon.
  • Use the provided 'server.js' to spin up a simple HTTP server that proxies the API calls (NOT RECOMMENDED).

To use the latter, first create a .env file with the parameters that suit your environment

PROXY_BASE_URL=https://your-host
SERVE_FOLDER=dist

and then run

node server.js

Building in a Docker container

One-time only, build the Docker image locally:

docker build -t lagosta-builder .

Once you have that you can then do:

docker run -it --rm --name lagosta-builder -v ${PWD}:/tmp/src lagosta-builder /bin/bash
root@06a45bcc9a3e:/tmp/src# yarn install
root@06a45bcc9a3e:/tmp/src# exit

Now that your Docker image and local Lagosta build directory are ready, in future you can just run yarn build like so:

docker run -it --rm --name lagosta-builder -v ${PWD}:/tmp/src lagosta-builder /bin/bash
root@06a45bcc9a3e:/tmp/src# yarn build
...
 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
                                  
Done in 19.66s.

The output will be in the ${PWD}/dist folder in the host.

lagosta's People

Contributors

alexanderband avatar carlosm3011 avatar density215 avatar dependabot[bot] avatar dev-gto avatar enricoberti avatar grada84 avatar gthess avatar hkkobayashi avatar nrodday avatar ongolaboy avatar ximon18 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.