Git Product home page Git Product logo

arachnefrontend's Introduction

Arachne 4 Frontend

Development

The repository includes a gulp configuration for setting up a local server, preconfigured with:

  • proxying to the backend running on the development server
  • url rewriting for AngularJS' HTML5 mode
  • live reloading

Prerequisites

You need the following components in order for the local server to work:

To install the necessary dependencies for the app run the following command in the working directory:

npm install
npm install -g bower gulp
bower install

To install the testing tools run

npm install -g karma
npm install -g karma-jasmine
npm install -g karma-ng-html2js-preprocessor
npm install -g karma@canary phantomjs karma-phantomjs-launcher

You may need root permissions on your machine in order to perform these commands successfully.

On Debian-based systems, if you have trouble installing dependencies use the 'nodejs-legacy'-package instead of 'nodejs'. Also gulp needs to be installed globally to run 'gulp server'.

sudo apt-get install nodejs-legacy
sudo npm install -g gulp

Running the tests

To run the unit tests, call

gulp test

This will run all tests matching the filename pattern test/*_spec.js. Jasmine is used as the testing framework here.

con10t submodule

The static files representing the project pages are stored in the directory con10t. The repository comes preconfigured with the Arachne project pages configured as a git submodule.

In order to set up the submodule you have to run the following commands after the initial checkout:

git submodule init
git submodule update
git checkout master

Subsequent updates can be loaded by running git pull origin master inside the directory con10t.

Running the development server

In order to run the frontend in the development server use the following command:

gulp server

After that you should be able to access the frontend under http://localhost:1234/.

Any changes made to HTML, SCSS or JS files should automatically trigger a browser reload.

Deployment

Build the application by running

gulp

In order for AngularJS' HTML5 mode to work use the following configurations:

nginx

server {
        listen   80;
        root /usr/share/nginx/www;
        try_files $uri $uri/ /index.html =404;
}

Apache

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond $1#%{REQUEST_URI} ([^#]*)#(.*)\1$
	RewriteRule ^(.*)$ %2index.html [QSA,L]
</IfModule>

arachnefrontend's People

Contributors

chbensch avatar danielmarreirosdeoliveira avatar david-vlz avatar dersmon avatar fabianzwodrei avatar janwieners avatar jphili avatar karen-sch avatar neuged avatar obensch avatar scuy avatar tkleinke 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.