This open source layout is a Middleman web application which utilizes the AngularJS structure. It comes arranged with a live reloading improvement condition and an approach to manufacture a static site for creation. This guide will tell you the best way to rapidly associate the site to the White Label API utilizing your customer id and play your mixtape tracks through Sound cloud.
Establishment
Before we start, you have to have a couple of things previously introduced, Ruby and NodeJS. On the off chance that you as of now have these, vibe allowed to jump to stage 3.
- Ruby is a programming language which runs Middleman, the static site generator we use. Download and introduce the most recent adaptation of Ruby for your foundation by adhering to the directions here. When you have Ruby set up, introduce the Ruby reliance supervisor bundler with pearl introduce bundler.
- NodeJS is an approach to run JavaScript code locally. We use Node and its bundle supervisor, npm, to introduce some frontend conditions. Download and introduce the most recent stable arrival of NodeJS here.
- Clone this repo by running the accompanying order in a terminal. git clone https://github.com/NoonPacific/White-Label-Web-Template.git.
Programming interface Keys
This layout expects you to have 2 API keys, White Label and Sound cloud. The white label web templates API key is expected to associate with the White Label server to bring your assortments, mixtapes, and tracks. On the off chance that you don’t as of now have a WL customer id, if it’s not too much trouble join.
White Label API Documentation
A Sound cloud API key is expected to play your mixtape tracks in the program. You can get a Sound cloud API key by enlisting another application. You will require the Client ID.
Arrangement
Since you have Ruby, Node, API keys, and the layout downloaded, you are prepared to begin running the site locally.
- Open a terminal and explore to the cloned repo. album White-Label-Web-Template
- Install all Node conditions. npm introduce
- Install every Ruby reliance. pack introduce
- Open source/js/application/config.js in your preferred supervisor and supplant YOUR_WHITE_LABEL_CLIENT_ID_HERE and YOUR_SOUNDCLOUD_CLIENT_ID_HERE with your White Label and Soundcloud customer id’s individually.
- Replace YOUR_DEFAULT_COLLECTION_HERE with the White Label assortment you need to stack when you visit the foundation of the site. http://YOUR_DOMAIN_NAME/
- Run the site locally with the order npm run dev.
- Open localhost: 4567 in a program. You should see the default assortment mixtapes and have the option to play tracks directly in the program.
Customization
This layout is just intended to fill in as a beginning stage for your site. We urge you to burrow around and tweak anything you need. Make something rad, at that point email us and we’ll help advance it.
The most significant document is ostensibly blend service.js. This administration utilizes your CLIENT_ID to speak with the White Label API to get your assortments, mixtapes, and tracks.
How about we customize
Logo
To change the logo that shows up at the head of the site, just supplant source/img/logo.svg with another svg record. We prescribe utilizing a svg document to guarantee the logo looks sharp on all screen sizes.
Textual style
Google textual styles are open source and extremely simple to arrangement in this format. To change the text style, open source/css/_variables.sass and alter these lines to your ideal textual style.
@import ‘https://fonts.googleapis.com/css?family=Open+Sans’
$font: ‘Open Sans’, serif
Html 5 Mode
You may have seen that in source/js/application/config.js there is a field called HTML_5_MODE, which is set to bogus as a matter of course. Setting this to genuine will expel the # in the url way. One thing to note however, is that if this is valid and your site is sent, the server must have the option to deal with serving a similar record for all ways.
Sending
To fabricate the site for creation, run npm run manufacture. This will minify all JavaScript records into a form/index. This registry can be transferred to a server or administration which can serve static sites, for example, Amazon S3 or Heroku.
Flood
In the event that you don’t as of now have a server arrangement and prepared to utilize, a simple method to get your site on the web so the world can tune in to your mixtapes, is by utilizing an assistance called surge.sh. The complementary plan of Surge permits you serve static sites with a custom space and free SSL. In the event that that doesn’t effectively solid astonishing, it is likewise incredibly simple to arrangement.
JavaScript Library
On the off chance that you would prefer not to utilize the Angular layout, or need to fuse White Label into your previously existing site, there is a JavaScript library you can use to handily speak with the White Label API. Along these lines you don’t need to stress over system solicitations or pagination.
a <script> tag.
<script src=”whitelabel.min.js”></script>
This will uncover the worldwide class WhiteLabel. After the page has been stacked, introduce an occurrence giving your White Label customer id.
var wl = new WhiteLabel(CLIENT_ID);
Model Usage
Getting all mixtapes in the assortment with slug “assortment slug”
wl.getCollectionMixtapes(“collection-slug”, {all: valid, results: true}).then(function(mixtapes) {
/Do something with exhibit of mixtapes
});
Get tracks for mixtape with slug “mixtape-slug”
wl.getMixtapeTracks(“mixtape-slug”, {results: true}).then(function(tracks) {
/Do something with exhibit of tracks
});
Improvement on this format
This format should be anything but difficult to arrangement and tweak. On the off chance that you have an inclination that you can improve this procedure with a force demand, kindly do as such.