How can I import blockstack.js as a script without using a package manager?

karanganesan · August 2, 2018, 4:17pm

Is it possible to have the Blockstack.js as a just a script that we can use

Like just importing it into a HTML file and start using blockstack,js as

blockstack.function(){
something;
}
I love blockstack but I don’t like to use the npm way to do it. And it has some issues in versions also. That’s why this idea.
…
Regards,
@karanganesan

ryan · August 2, 2018, 5:13pm

Hey thanks for posting Karan, love that you’re thinking about this.

We’ll share some thoughts on it soon.

larry · August 3, 2018, 12:59am

Yes! You can download blockstack.js from the dist folder and use it without npm! https://github.com/blockstack/blockstack.js/tree/master/dist

This is how we use it in both our ruby blockstack omniauth strategy and blockstack-android libraries.

I added an issue to update our readme and make this more clear! Thank you for the feedback!!! https://github.com/blockstack/blockstack.js/issues/517

karanganesan · August 3, 2018, 1:28am

Great ️

Looking forward to try it

sabyasachi · February 7, 2019, 6:29pm

I downloaded the latest version of blockstack.js from the dist folder and tried to include it as a normal .js script from my html code. However, my editor flags over a 100 errors in the blockstack.js file. I haven’t looked at the details of the errors yet, but I am wondering if I need to include any dependencies with blockstack.js

djnicholson · February 7, 2019, 7:23pm

I don’t use npm for blockslack (source: https://github.com/djnicholson/blockslack) I just combine the contents of https://raw.githubusercontent.com/blockstack/blockstack.js/v18.2.1/dist/blockstack.js with the rest of the Javascript that I minify.

The JavaScript does use ES6 features, so you may see errors if your editor/browser does not support that. You could transpile it to support older browsers, but there is not much point because the blockstack rendered JavaScript used during authentication also uses ES6.

mehmetkose · February 7, 2019, 7:33pm

see this;

github.com

fupio/fupio/blob/459222b671658a318d3fa9c99a76ff5b00c9d070/src/index.js#L12


import { Router } from 'preact-router';
import Sockette from 'sockette';
import hot from 'hot-ranking';


import Main from './pages/main';
import Wall from './pages/wall';
import Page from './pages/page';
import Settings from './pages/settings';
import Discover from './pages/discover';


const {
	isSignInPending, isUserSignedIn, redirectToSignIn,
	handlePendingSignIn, signUserOut, loadUserData,
	lookupProfile, Person,
	getFile, putFile
} = window.blockstack;


import './style';


export default class App extends Component {
	constructor(props) {

and this;

github.com

fupio/fupio/blob/459222b671658a318d3fa9c99a76ff5b00c9d070/src/index.html#L61


			<% } %>
		<% } %>
	</head>
	<body>
		<%= htmlWebpackPlugin.options.ssr({
			url: '/'
		}) %>
		<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
		<script>window.fetch||document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')</script>
		<noscript>JavaScript disabled on your browser.</noscript>
		<script src="/assets/blockstack.18.2.1.min.js"></script>




		<script src="//cdn.ravenjs.com/3.26.2/raven.min.js" crossorigin="anonymous"></script>
		<script>
				Raven.config('https://[email protected]/1235375').install();
		</script>
	</body>
</html>

Crypt0Pro · February 9, 2019, 8:23am

Thanks for sharing. It really makes things clear for me.