Giter Club home page Giter Club logo

ngiab-client's Introduction

Next Gen in a Box Visualizer

This app was created using an experimental Tethys + React app scaffold. It uses React for the frontend of the app and Tethys as the backend.

Development Installation

You need to install both the Tethys dependencies and the node dependencies:

  1. Install the app in Tethys Platform
conda activate tethys
cd tethysapp-ngiab
tethys install -d
  1. Install the node and dependencies
cd tethysapp-ngiab
npm install --dev

Development

The webpack dev server is configured to proxy the Tethys development server (see webpack.config.js). The app endpoint will be handled by the webpack development server and all other endpoints will be handled by the Tethys (Django) development server. As such, you will need to start both in separate terminals.

  1. Start Tethys development server
tethys manage start
  1. Start webpack development server (in separate terminal)
npm start

Build

Webpack is configured to bundle and build the React app into the tethysapp/<app_package>/public/frontend directory. Before building a Python distribution for release, you should build using this command:

npm run build

Test

Use the following commands to lint and test the React portion of the app.

npm run lint
npm run test

The linting capability is powered by eslint and a number of plugins for React. The testing capabilities include jest, jsdom, testing-framework, user-event, and a few other JavaScript testing utilties to make it easy to test the frontend of the React-Tethys app.

Acknowledgements

This implementation is based on the excellent work done by @Jitensid that can be found on GitHub here: Jitensid/django-webpack-dev-server.

Some resources and source code is also derived from projects generated using Create React App.

ngiab-client's People

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.