Setting up authentication app on a hosted server

Support
#21

Hi @moxiegirl,

I have not tried building the standard web HelloWorld in my environment yet. But at first glance the tutorial at https://docs.blockstack.org/browser/hello-blockstack.html appears to be fairly identical to your tutorial. at https://github.com/blockstack/blockstack-ios/blob/master/docs/tutorial.md

npm install -g yo
npm install -g generator-blockstack
make a new directory (in one tutorial is is mkdir hello-blockstack and the other it is hello-world-tutorial)
cd into that directory

next is where I see the only difference.
in the ios tutorial you have yo blockstack:react
in the hello world tutorial you have yo blockstack

why do you have :react in one but not the other?

Further down in the hello world tutorial it does answer my question about what file I need to modify to customize the web app

Application manifest

The application’s /public/manifest.json file configures your app. The configurations dictate how the application is displayed in auth views and on user home screens. The contents are very simple:

{
  "name": "Hello, Blockstack",
  "start_url": "localhost:5000",
  "description": "A simple demo of Blockstack Auth",
  "icons": [{
    "src": "https://helloblockstack.com/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}

Is there a good reason you have separate hello world and hello blockstack tutorials? If not I recommend sticking with one and either adding a link to it in your ios tutorial or embedded it into your ios tutorial page so you do not have to maintain two. Plus the helloworld tutorial explains what needs to be modified to customize it.

So I will try the helloworld tutorial later and see if it builds but like I said the only difference I see is that it has
yo blockstack
instead of
yo blockstack:react

which one is right and should this make a difference?

Thanks,
Pete

#22

I agree with @shreyas. .This is outside of the scope of the ios api and sdk and is just about getting the node.js web app to build correctly.

As I just responded to @moxiegirl in my reply above I will try the helloworld tutorial later and see if it builds but the only difference I see is that the helloworld tutorial has
yo blockstack
while the node.js section of her ios tutorial has
yo blockstack:react

what is the difference / impact of having or not having the :react at the end

Thanks,
Pete

#23

@petec You can change the name of your app in the manifest.json file where you see

"name": "Hello, Blockstack",

The npm vulnerability warnings that you are seeing shouldn’t have any effect on you running the app in development. It’s recommended that you fix them before you go to production.

re: Difference between yo blockstack and yo blockstack:react
The first one generates a vanilla JS application while the latter generates a React app.

Hope this helps

#24

Hi @yukan,

Thanks for the reply. Since I’m creating a mobile ios app I want a react app. Right?
If so that means I should just follow @moxiegirl’s ios tutorial at https://github.com/blockstack/blockstack-ios/blob/master/docs/tutorial.md to create the web app and then to deploy I start by doing npm run build.

These were the steps I followed but the npm run build results in the errors below. If you have not already can you or someone else try doing the ios tutorial /w the yo blockstack:react and doing npm run build to see if you get the same errors I run into.

Thanks,
Pete

ERROR in index_bundle.js from UglifyJs

Unexpected token: name (e) [index_bundle.js:13364,8]

Child html-webpack-plugin for “index.html” :

[0] ./~/lodash/lodash.js 540 kB { 0 } [built]

[1] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 533 bytes { 0 } [built]

[2] (webpack)/buildin/global.js 509 bytes { 0 } [built]

[3] (webpack)/buildin/module.js 517 bytes { 0 } [built]

npm ERR! code ELIFECYCLE

npm ERR! errno 2

npm ERR! [email protected] build: webpack -p

npm ERR! Exit status 2

npm ERR!

npm ERR! Failed at the [email protected] build script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/peterchmiel/.npm/_logs/2018-11-30T18_36_00_446Z-debug.log

#25

Hi @moxiegirl, @yukan, @shreyas,

Was poking around github and wondering if my problem with npm run build is related to this ios sdk issue

Or if could be related to the version of the blockstack app generator I installed when I followed the tutorial steps and did npm install -g generator-blockstack almost 2 weeks ago. I noticed this posted in slack that v.0.5.0 was released. https://blockstack.slack.com/archives/C074LC7RC/p1543370028456300

I am not very familiar with npm but googled around and came across the ‘npm list --global’ command to try to find out what version of the blockstaxck app generator I have installed and got the result below. Appears that I have v0.4.0 installed.

MacBook-Pro:hello-blockstack peterchmiel$ npm list --global

/usr/local/lib

├─┬ [email protected]

So I updated to v0.5.0, and went through the ios tutorial steps, was able to run the app by pointing my browser to localhos:8080 but still get these errors when I run npm run build

ERROR in index_bundle.js from UglifyJs

Unexpected token: name (offset) [index_bundle.js:2212,6]

Is the package.json is out of date is pulling an old version of Blockstack.js #67 the problem? Can someone try testing this out and go through the ios tutorial to create the node.js web app and see if npm run build works for them.

Thanks,
Pete

#26

@petec I tested all the tutorials when I wrote them. I also tested the iOS again about two weeks ago. So it does run successfully under the versions listed in the tutorial. There is even a download of the finished project.

You can definitely edit the package.json in your project to get a specific version of the Blockstack.js. That issue is not a blocker in that the current code does work with the package as specified.

1 Like
#27

Hi @moxiegirl

I just tried it on another macbook pro and get the same error when I do an npm run build.

ERROR in index_bundle.js from UglifyJs

Unexpected token: name (offset) [index_bundle.js:2212,6]

As I said before I can go through the ios tutorial, get the web app to compile and it runs when I do npm start. The problem is when I do npm run build. Have you tried doing the steps in the ios tutorial to create the web app and then do an npm run build?

Thanks,
Pete

#28

Unfortunately, no, for this reason:

I should add, none of our tutorial code is really created to support a full production build / deploy system. You definitely would need to know npm or switch to a package manager of your choice to create a production dependency/build.

The tutorial that comes the closest to what might be a full on npm sturcture is the Zero-to-Dapp which includes more robust NPM setup with a package.json utlitizing scripts.

#29

Hi @moxiegirl…sorry but that reference back to a previous answer does not help me understand why you have not tried run npm build after the web app steps in the ios tutorial. You have also already directed me to the animal kingdom tutorial and the first step it has in deploy your dapp on the web is to do ‘run npm build’. This is where I have been stuck for the past week. So how do I move forward from here?

You have already successfully deployed the authentication web app that can be used by ios example app when you deployed it to https://heuristic-brown-7a88f8.netlify.com. I am just missing the steps you did to
do that.

You mentioned that you liked the idea of a how to deploy tutorial. Do you have a time frame on that. If you do not have time to create a polished looking tutorial with screenshots, etc can you go through the steps of creating and deploying an authentication web app that can be used in an ios mobile app, write down the steps and share that with me prior to cleaning it up so you can publish it for the rest of the blockstack community.

Thanks,
Pete

#30

Hi @moxiegirl,

You said…
I should add, none of our tutorial code is really created to support a full production build / deploy system.

Since the web app is just an authentication flow to sign in with an existing blockstack id or create a new one and redirect back to the mobile app I do not understand why I should have to do more than just modify the icon, text and name of the hello-blockstack app and deploy it for use in production system. What is missing or not suitable for a production mobile app to authenticate with blockstack in that hello-world example. Could you please explain.

But once again the most important thing is how do I deploy a blockstack authentication app that I can use in a production ios app.

Thanks,
Pete

#31

Hi @petec I’ve spoken with @shreyas and he is going to see about helping you. He wrote the original hello world so he is the best person to speak with.

I’ve not encountered any company create a deployment-ready NPM config with a hello-world. This is because:

  • hello-worlds are meant as short examples to get people started building, not applications to deploy
  • deployment is purpose-driven and environment specific so no single NPM config would suffice for everyone

You can discuss your situation with @shreyas and hopefully he can get you on your way.

#32

Thanks @moxiegirl. I’ll take this conversation offline and reach out to @shreyason on slack and once we have a solution I’ll post it back here for the community to benefit from it.

1 Like
#33

I’m having the exact same issue. I can’t seem to get past the pesky npm run build command. Did you or another else get past this??

Edit: Since following this tutorial (https://docs.blockstack.org/ios/tutorial.html), npm run build now works and I have deployed to netlify (https://sharp-kilby-766a80.netlify.com) however I get an error on the webpage when I try to sign in with BlockStack -

21

Is there something wrong with my manifest file?

{
  "name": "Mito",
  "description": "A simple demo of Blockstack Auth",
  "icons": [
    {
    "src": "mito.png",
    "sizes": "192x180",
    "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone"
}
#34

Hi @BeIllegalBeagle you deployed the iOS application intended for mobile to netlify. That error you are getting may be a CORs error – I’m not familiar with deploying an iOS app to netlfy. On Netlify tho, you need to provide two files; as described here: