Giter VIP home page Giter VIP logo

infinite-list's Introduction

infinite-list

This is a template to quickly start web development with Clojurescript & Firebase. It uses figwheel.main for live development and cljs-test-runner for live testing. It uses firemore to interact with Firebase. It also includes a small script allowing you to change the name of this project to something other than infinite-list.

Use this template by clicking on the big green button that says "Use this template" in the upper right corner.

Installing Clojure

If you are new to Clojure, installation has become very easy. Follow instructions here.

Development (Live Editing)

This project uses figwheel.main for development. The figwheel.main server can either be started directly from the console or emacs.

Console

>> cd <this-project>
>> clj -m figwheel.main -b dev

Emacs

emacs src/infinite-list/core.cljs

From within emacs, type M-x cider-jack-in-cljs and then Enter. figwheel-main is your environment and dev is your build.

Result

After a little time a browser will open with this app loaded within it. Editing any of the files under /src or the resources/public/css/style.css file should cause those files to be live-reloaded upon save. For more information please read the figwheel.main docs (they are quite good).

Development (Testing on Save)

Since this is a browser based application, you will need a integration test suit that runs against a real browser. We will use Chrome (in headless mode) as our testing environment. We will use Karma to manage Chrome. We will do our actual testing with cljs-test-runner.

Prerequesites:

You need chrome, npm, and node for the Karma testing. This depends on your system (Unix, Mac, Windows), follow the instructions on each.

  1. Install Google Chrome
  2. Install node & npm

Install Test Dependencies

We can install the remaining dependencies using npm. Note that you are installing the karma-cli globally (everything else is locally installed).

  1. > npm install -g karma-cli
  2. > cd <this-directory>
  3. > npm install karma karma-chrome-launcher karma-cljs-test --save-dev

Run test upon file changes

Now run the following in <this-directory>.

clojure -Atest -x chrome-headless --watch src --watch test

It will run the test once. It will re-run the test whenever any file is edited under either /src or /test. Feel free to add (or remove) locations under watch using the --watch argument.

Continous Integration with Github Workflow

**Warning: DO NOT SHARE YOU SECRETS WITH OTHERS. Your FIREBASE_TOKEN environment variable allows anyone to act as you with regard to firebase! **

A "Push on Master" workflow has been included in .github\workflows\master-push.yml that will attempt to push your project to firebase hosting. This workflow requires that two secret variables be set within Github. Secrets can be set in the Github page for your project under Project > Settings > Secrets.

You will need to add two environment variables named FIREBASE_PROJECT and FIREBASE_TOKEN within Secrets.

  • FIREBASE_PROJECT is the name of the firebase project that you want to deploy this project to.
  • FIREBASE_TOKEN is your token that was generated from running > firebase login:ci from your terminal.

Once these two environment variables are set then Github will automatically deploy your code to firebase on every push to master. The code is compiled with advanced compilation.

Contributions

Pull Request are very welcome.

License

MIT

infinite-list's People

Contributors

samedhi avatar

Watchers

 avatar James Cloos 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.