High data costs? Slow PageSpeed? High server load? Need a solution for viral content? Atorable.com moves more content.
As more users visit your site the more users serve up your content. More users makes faster downloads, less server load, lower data costs, more decentralized. PageSpeed will also increases by not blocking page load. Designed for use with Webpack and atorable-react.
The atorable-loader resolves import/require() of a file into a Webtorrent magnet uri. During the webpack build the target file is emitted along with the corresponding torrent file into the output directory. The emitted files act as the seeds for the torrent when the root url is provided to the build. Atorable.com offers a paid plans that integrates easily with your build to further decrease your server load. Contact us for custom solutions.
To begin, you'll need to install atorable-loader:
$ npm install atorable-loader --save-devImport (or require) the target file(s) in one of the bundle's files (see atorable-react):
file.tsx
import React from 'react'
import { ATorVidStrm, ATorImg, ATorVid } from 'atorable-react'
import hugeImage from './hugeImage.jpg' // ==> 'magnet:?xt=urn:...'
import bestMovieEverTribute from './bestMovieEverTribute.mp4' // ==> 'magnet:?xt=urn:...'
const oceanFish = require('./oceanFish.mp4') // ==> {default: 'magnet:?xt=urn:...'}
const Example = (props: any) => {
return (
<div>
<ATorVid
width={'320'}
height={'240'}
type={'video/mp4'}
magnetURI={oceanFish}
loading={<h2 style={{ color: 'orange' }}>Loading</h2>} // optional
/>
<ATorVidStrm
width={'320'}
height={'240'}
type={'video/mp4'}
autoplay={true}
magnetURI={bestMovieEverTribute}
/>
<ATorStreamVideo
aspectRatio={3 / 4}
type={'video/mp4'}
magnetURI={bestMovieEverTribute}
autoplay={true}
/>
// aspectRatio={height / width} aspectRatio works best for responsive
videos
<ATorImg magnetURI={hugeImage} style={{ border: 'solid' }} />
</div>
)
}Then add the loader to your webpack config. For example:
webpack.config.js
const rootURL = 'http://localhost:8080/' // Define your root url http://example.com/
// this makes it possible for the initial torrent to be downloaded ending slash / is important.
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg|m4v|mp4)$/i,
// test: /src[\\\/]assets[\\\/]Needle\.jpg$/, // for targeting a specific file
use: [
{
loader: 'atorable-loader',
options: {
baseURL: rootURL,
showMagnetInfo: true // optional
}
}
]
}
]
}
}And run webpack via your preferred method. This will emit file.* and a file.torrent file
in the output directory.
This makes it possible for the initial torrent to be seeded from an external server reducing local load, improving PageSpeed and faster high demand downloads.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg|m4v|mp4)$/i,
use: [
{
loader: 'atorable-loader',
options: {
ATORABLE_SECRET_KEY:
process.env.ATORABLE_SECRET_KEY, // access token from atorable.com
showMagnetInfo: true, // optional
PRODUCTION: true // optional default: false
// if true, this will only update production build files
}
}
]
}
]
}
}When you run webpack the Atorable.com API will send relevant files to an external server and return magnetURIs.
For use with a set build environment NODE_ENV=development (not relevant to webpack env settings i.e. EnvironmentPlugin)
webpack.config.js
const devURL = 'http://localhost:8080/' // Define your root url
const prodURL = 'http://www.example.com/'
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'atorable-loader',
options: {
rootUrl() {
console.log(
'Here Node env: ',
process.env.NODE_ENV
)
if (process.env.NODE_ENV === 'development') {
return devURL
}
return prodURL
}
}
}
]
}
]
}
}webpack.config.js
const rootURL = 'http://localhost:8080/' // Define your root url http://example.com/
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'atorable-loader',
options: {
baseURL: rootURL
}
}
],
include: [path.resolve(__dirname, 'img')],
exclude: [
path.resolve(__dirname, 'app/demo-files'),
/node_modules/,
/doNotWant\.jpg$/
]
}
]
}
}