Deploy to S3

From @sgrinspoon on Sun Jan 21 2018 20:57:15 GMT+0000 (UTC)

I’m getting the following response, “npm ERR! missing script: build”

What can I do to address this?

From @sgrinspoon on Mon Jan 22 2018 22:55:49 GMT+0000 (UTC)

I figured it out – I ran a few of the npm install scripts in my root directory as opposed to my working directory. never mind!

From @muratcetinkaya on Thu Mar 08 2018 14:20:12 GMT+0000 (UTC)

Is this example SEO friendly?
If yes which part helps to be seo-friendly. If not how can we make it so?

I’m a quite newbie on serverless and react, so please be kind if my question looks silly :slight_smile:

From @jayair on Thu Mar 08 2018 20:14:12 GMT+0000 (UTC)

@muratcetinkaya No worries.

We might have addressed this somewhere else. But the notes app is a single page app and it is not meant to be publicly accessible (it’s behind a login). So it isn’t really SEO friendly.

Are you wanting to remove the login and make it publicly accessible?

From @muratcetinkaya on Fri Mar 09 2018 12:38:06 GMT+0000 (UTC)

Hi @jayair,
I’m planning to build a mortgage comparison website. Yes it will be publicly accessible. I was thinking to build it with a similar stack as in this example. But I am not sure if google bots will be able to read the content of my pages and index it so people can find it when they search the words like ‘mortgage calculator’ …

From @jayair on Fri Mar 09 2018 20:42:51 GMT+0000 (UTC)

@muratcetinkaya Google does handle JS for SEO but a better pattern for this is to use a static page generator like Jekyll for your landing pages. And then use React for your actual app. This way you get to create content for SEO purposes while still having a single page app.

For example this tutorial itself is in Jekyll (for SEO purposes) and the demo app is in React.

From @muratcetinkaya on Sat Mar 10 2018 17:28:23 GMT+0000 (UTC)

@jayair Thank you very much. I’ll test it for my website.

When I tried upload to S3, I got the following error message

F:\GitProject\nodejs\serverless\notes-app-client>aws s3 sync build/ s3://notes-app-client-1688

Invalid endpoint: https://s3.US

Any setup I missed?

I think this might be because the default region is not configured properly in your AWS CLI. You can run the aws configure command and set your default region name to us-east-1.

Thanks. I need to run the aws configure to set the default region to us-east-1 from US East.

1 Like

I’m getting Uncaught SyntaxError: Unexpected token < on main.{random number}.js and a blank screen every time I deploy to production. Seems like a caching issue maybe, but I have no idea how to fix it. Any help would be greatly appreciated so my users don’t have to reload the page twice after each deploy.

Hmm so it works fine when you refresh the page?

It’s a blank page with the error after the first refresh. If I refresh again, then the content comes back and the error goes away. Again, I feel like it’s a caching issue that I can’t figure out.

Yeah it seems like a caching issue. Can you see the main.{hash}.js that is being loaded? And if that is different between the two reloads?

Yes, the number is different between the two reloads. So, at first, my prod deploy had main.b7254569.js in the Sources view in the console. The HTML was also referencing main.b7254569.js. Then I deployed prod and refreshed the page. At this point, the page was blank. The main.{hash}.js file wasn’t even in the Sources view in the console, and it was throwing an error in the old main.b7254569.js file, which shouldn’t be there anymore. The error said “Uncaught SyntaxError: Unexpected token <”. It’s worth noting at this point, my index.html was referencing the new main.7fd9f660.js file that was missing from the Sources. Then, I refreshed again and I saw the new main.7fd9f660.js file in the Sources and my page content actually loaded.

I’m interested in a version of the React client that uses redux and thunk. However your repo is currently unavailable, do you happen to have moved it somewhere else?

If not, can any kind soul provide a redux/thunk version of the React client that this tutorial uses?

Yeah definitely seems like a caching issue. It could be related to PWAs. Can you try this and give it a try.

Hmm our repo is always where it has been. It is right here

Thank you! That seems to have done the trick. I deployed with that unregister() code yesterday and then I did another deploy today to test it. Refresh worked just fine in my Chrome browser on both desktop and mobile. Thanks again

1 Like

Awesome. Yeah they are going to disable this by default in the new Create React App. It causes too many unintended consequences.