foxx-framework
Version:
Foxx framework based on RiotJS + ArangoDB/Foxx
305 lines (261 loc) • 12.3 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Foxx-framework</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/css/uikit.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css">
<link rel="stylesheet" href="css.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/components/prism-css.min.js"></script>
</head>
<body>
<a href="https://github.com/solisoft/foxx-framework"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
<nav class="uk-navbar">
<div class="uk-container uk-container-center">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Foxx Framework</a></li>
</ul>
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
<li><a href="#start">Getting Started</a></li>
<li><a href="#why">Why?</a></li>
</ul>
</div>
</div>
</nav>
<div class="foxx">
<div class="uk-container uk-container-center">
<div class="uk-grid">
<div class="uk-width-1-2">
<img src="foxx.jpg" alt="">
</div>
<div class="uk-width-1-2 uk-margin-top">
<h1>Be smart ! Save time by using microservices !!</h1>
<h2>Foxx-Framework is built on ArangoDB database and Foxx services.</h2>
<h3>Create apps, develop and deploy with ease.</h3>
<h4>NEW! foxx-framework use now JWT tokens</h4>
<a href="https://gitter.im/solisoft/foxxy" style="border:0"><img src="https://camo.githubusercontent.com/da2edb525cde1455a622c58c0effc3a90b9a181c/68747470733a2f2f6261646765732e6769747465722e696d2f4a6f696e253230436861742e737667" alt="Gitter" data-canonical-src="https://badges.gitter.im/Join%20Chat.svg" style="max-width:100%; border:0"></a>
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-center uk-margin-top">
<div class="uk-grid">
<div class="uk-width-1-1">
<iframe src="https://player.vimeo.com/video/245027221" width="100%" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></p>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-1">
<a name="start"> <h1>Why?</h1> </a>
<p>I wanted to create a tool for building web applications easily using Foxx & ArangoDB. I also wanted to have an easy way to build, develop my app and deploy it with ease. So I did create <strong>foxx-framework</strong> !
<br>
With <strong>foxx-framework</strong> you can create new skeleton apps with everything configurated. It comes with :
<ul>
<li><a href="http://brunch.io">brunch</a> for live reload and building assets for production</li>
<li><a href="http://riotjs.com">Riotjs</a> for building web apps and widgets.</li>
<li><a href="https://getuikit.com/">UIKit</a> for designing views.</li>
</ul>
</p>
<hr>
<p>
<strong>Foxx-framework</strong> allow you to create your app localy and then deploy your code on your server with ease. We use <a href="http://nadarei.co/mina/">mina</a> to automate the deployment.
</p>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-1">
<a name="start"> <h1>Get Started.</h1> </a>
</div>
<div class="uk-width-1-2">
<h2>Install requirements</h2>
<p><strong>Foxx-framework</strong> needs nodejs and <a href="https://github.com/yarnpkg/yarn">yarn</a> installed. <strong>ArangoDB >= 3.1</strong> of course is needed.</p>
<p>To deploy your application, you'll need Ruby too.</p>
</div>
<div class="uk-width-1-2">
<h2>Install foxx-framework</h2>
<code>npm install foxx-framework -g</code>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-1">
<h2>Create your first app</h2>
<p>You need first to create an database within ArangoDB web UI.</p>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-2">
<code>foxxy new sample_app --database my_test_db</code>
<p>
This action will create the skeleton app with a simple login authentification.
</p>
<p class="uk-alert uk-alert-info">You have to create some symlinks, please look at the command output, latests lines will show you how to create symlinks. Adapt them if needed.</p>
<code>cd sample_app && yarn</code>
<p>This will install everything you need to run the application.</p>
<h4>Setup the application</h4>
<p>Create an account within the app UI and validate it by adding the field <em>{ "a": true }</em> to your user object (via ArangoDB UI). So next time you'll login it will be OK.</p>
</div>
<div class="uk-width-1-2">
<pre>
└── sample_app
├── Gemfile
├── app
│ ├── assets
│ │ ├── fonts
│ │ ├── img
│ │ ├── index.html
│ │ └── login.html
│ ├── css
│ │ └── css.scss
│ ├── js
│ │ ├── common.js
│ │ └── js.js
│ ├── vendors
│ └── widgets
│ ├── loading.html.tag
│ └── login.html.tag
├── brunch-config.js
├── config
│ ├── deploy.rb
│ └── local_env.yml.sample
├── foxx
│ └── auth
│ └── APP
│ ├── README.md
│ ├── main.js
│ ├── manifest.json
│ ├── package.json
│ ├── scripts
│ │ ├── lost-password.js
│ │ ├── send-mail.js
│ │ └── setup.js
│ └── test
│ └── example.js
├── package.json
└── yarn.lock
</pre>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-1">
<h2>Run the app</h2>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-2">
<h4>Command</h4>
<code>yarn run brunch w -- --server</code>
<p>This will start the listener and server... Any change on your source code will run a live reload in your browser.</p>
</div>
<div class="uk-width-1-2">
<h4>Output</h4>
<pre>04 Oct 16:38:41 - info: application started on http://localhost:3333/</pre>
<pre>04 Oct 16:38:41 - info: compiled 20 files into 4 files, copied 4 in 2.5 sec</pre>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-1">
<h2>Add a CRUD to your app</h2>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-1">
<h4>Commands</h4>
<code>foxxy g crud post</code>
<br>
<p>It will create a Foxx service called posts and will also create a RiotJS widgets called <em>app/widgets/posts.html.tag</em></p>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-2">
<p>Once CRUD created open <em>foxx/posts/APP/main.js</em> at line 30 (line 3 on the code below) ...</p>
<pre><code class="language-js">var loadFields = function() {
// { r: new_row, c: classname, n: name/id, t: type, j: joi validation, l: label, d: data list }
fields = [
]
schema = {}
each(fields, function(f) {
schema[f.n] = f.j
})
}
</code></pre>
</div>
<div class="uk-width-1-2">
<p>... and define your model.</p>
<pre><code class="language-js">var loadFields = function() {
// { r: new_row, c: classname, n: name/id, t: type, j: joi validation, l: label, d: data list }
fields = [
{ r: true, c: "1-1", n: "title", t: "string", j: joi.string().required(), l: "Title" },
{ r: true, c: "1-2", n: "date", t: "date", j: joi.string().required(), l: "Publishing Date" },
{ r: false, c: "1-2", n: "draft", t: "list", j: joi.string().required(), l: "Draft?", d: [["y", "Yes"], ["n", "No"]] },
{ r: true, c: "1-1", n: "text", t: "text", j: joi.string().required(), l: "Text"}
{ r: true, c: "1-2", n: "picture", t: "image", j: joi.string(), l: "Pictures"}
{ r: false, c: "1-2", n: "asset", t: "file", j: joi.string(), l: "Files"}
]
schema = {}
each(fields, function(f) {
schema[f.n] = f.j
})
}</code></pre>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-1">
<code>foxxy g eu setting</code>
<p>Generate a service and a collection settings with a single row. The widget will allow you to edit and update the row</p>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-1">
<code>foxxy g basic info</code>
<p>Generate an empty service, a widget and a collection infos.</p>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-1">
<code>foxxy g service v1</code>
<p>Just create a service v1. No widget, no collection.</p>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-1-1">
<h4>Activating Search functionality</h4>
To activate search functionnality you have to define first your <em>search</em> content. Go to line 86 and 96 and replace comment by :
<p><code>data.search = [data.title, data.text, data.date].join(" ")</code></p>
<p>So when you'll create or modify your object, the search field will be up to date. You can start using the search bar and press enter to filter your content using the full text search engine.</p>
</div>
</div>
<div class="uk-grid">
<h4>New in 0.2.24 : Manage assets</h4>
<iframe src="https://player.vimeo.com/video/244731017" width="100%" height="503" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="uk-grid">
<div class="uk-width-1-1"><h2>Screenshots</h2></div>
<div class="uk-width-1-2"><img src="ui/1.jpg" alt=""></div>
<div class="uk-width-1-2"><img src="ui/2.jpg" alt=""></div>
<div class="uk-width-1-2"><img src="ui/3.jpg" alt=""></div>
<div class="uk-width-1-2"><img src="ui/4.jpg" alt=""></div>
<div class="uk-width-1-2"><img src="ui/5.jpg" alt=""></div>
</div>
</div>
<div class="foxx uk-margin-top">
<div class="uk-container uk-container-center">
<div class="uk-grid">
<div class="uk-width-1-1 uk-text-center">
<p>foxx-framework is created by Olivier BONNAURE - <a href="https://github.com/solisoft/foxx-framework" target="_blank">github repository</a></p>
</div>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-711606-37', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>