Would you consider using npm for client-side dependencies too and browserify or webpack so that you can just require('react') or similar in the front-end code? Most people building modern webapps these days use a similar system and it would be really great if there was a way to get started with this inside the browser, without installing anything – since this is where simpler environments like jsfiddle and codepen start to fall short.
(If that worked seamlessly there’s a good chance we’d want to suggest HyperWeb from the React site in our quick-start section. :))
I had a similar question, though I was looking for a more “lightweight” way of adding client-side dependencies: something like a quick-pick control for CDN-based client depencies, like the ones you find in JS playgrounds and Stack Snippets.
This is especially important if it would be strongly advised to use integrety on script tasks, because it can become tedious to manually construct those script tasks when you’re just prototyping something with HyperWeb.
As a temporary workaround, I suggest using the requirejs library [1]. I understand it is not exactly the same solution, but it at least makes you able to keep dependencies separate and guarantees that the global domain doesn’t get polluted.
Our team will definitely be digging into this, but in the shorter-term we’ve created an alternative solution, which provides well for your use-case I think. So we’ve made it possible for you to remix (copy) a project from a URL. So for example, I’ve created a version of the React tutorial example, and if you provided users with the remix URL then when they click on it, they get their own version of that project that they can play around with in HyperDev - no setup required. Let me know if you think this will work for you, and I can help you to get the remix URL for any projects you want to use as it’s not currently exposed in the UI.
I made this https://hyperdev.com/#!/project/jewel-back using webpack and a postinstall script. It worked for a while, then the bundle.js disappeared (now I copied it manually in a ‘fixed’ file, but this seems like cheating to me…). If you just let the file created by webpack persist on the server we will be able to use the webpack workflow in this way.
That would be absolutely awesome. I’d need like webpack support for my Angular 2 experiments as well. The lack of support for it forces me to do the setup locally right now.
Given the answer was from Mar 29. Have there been any changes in the mean time? Like, has the feature already been implemented meanwhile?
It’ll work for the files it needs to create, which didn’t before. However, that would still need console access, which is something we’re still discussing how best to expose. For now, if you’re using it as a boilerplate generator, then an import of a generated project and remix is currently the best way to do that.
This sample app is made with React https://gomix.com/#!/project/voteplex and uses browserify-middleware to pack the components. Caching works too, now that we have filesystem access.
const http = require('http')
const path = require('path')
const express = require('express')
const app = express()
const assets = require('bankai')(path.join(__dirname, './public/client.js'))
app.use(express.static('public'))
app.get('/', function (request, response) {
response.sendFile(__dirname + '/views/index.html')
})
const server = http.createServer(function (req, res) {
if (req.url === '/bundle.js') return assets.js(req, res).pipe(res)
if (req.url === '/bundle.css') return assets.css(req, res).pipe(res)
app(req, res)
})
server.listen(process.env.PORT, function () {
console.log(`Your app is listening on port ${process.env.PORT}`)
})
No big setup on the back end. Just having a request for css and js bundles being handle by bankai- which can also cache it for when development is done so you aren’t rebuilding on every request.
Then in index.html have a link for <script src='/bundle.js'></script>
and <link rel='stylesheet' href='/bundle.css>
Then I just use client.js as my entry point for the app and require’d stuff from there.
