Codesandbox-client: Is it possible to deploy static websites (and include "alias") using Zeit/Now?

[babakness]

Hello, I tried to deploy a static site by modify package.json and by adding a now.json file both which would hint to now that { "type": "static"} as I have no need for server rendering for a particular experiment.

However, it seems that when clicking on "deploy" both package.json and now.json are ignored. Another use for now.json would be to include an alias configuration.

Please let me know if I'm "doing it wrong" and there is some way to deploy a site statically. Static deployments don't count against your total deploy count, which is another advantage.

[CompuIves]

Hey! I think we need to manually tell the API of now to use static as upload method. Which shouldn't be too hard since we have the files available to infer this. We can do that here: https://github.com/CompuIves/codesandbox-client/blob/master/packages/app/src/app/store/modules/deployment/actions.js#L44-L45.

[HackAfro]

I'll like to take a stab at this. Will changing the deploymentType to static solve this? @CompuIves

[CompuIves]

That will fix it @HackAfro! I'd greatly appreciate the help 😄! Please check CONTRIBUTING.md to find out how sign in works in local environment (we will make this easier in the future).

Also, let me know when you have any questions of course! 😄

[HackAfro]

No problems. Working on this.

[babakness]

Thanks @CompuIves I've cloned this repo and did some work. While deploying static is pretty nice, its not as useful as being able to somehow deploy the compiled / bundled version as static. Ultimately, one works in a dev environment to make rapid changes; yet we deploy the optimized build. Static build can benefits from easier global distributions on CDNs.

It would really be a game changer to work online, build online, and deploy online.

[DTrejo]

@babakness one idea: set up CI to do the build & deploy to now for you? One risk: not sure how easy it is to set up CI to do that for you. If you figure something out let me know? (I haven't tried this myself yet)

[DTrejo]

@babakness here's how I deployed a codesandbox to my personal gh-pages site. It was pretty easy! Thanks codesandbox :)

unpublished, draft post:

---

title: How to Publish a Vue CodeSandbox.io to Github Pages on a Custom Domain
date: 2018-01-11 05:55 CET
tags: howto, js
author: dtrejo

layout: 'Layout'

{{$page.title}}

Here's how I recently published dtrejo.com/colorpreview.

• I started developing with the vue template on [codesandbox.io][https://codesandbox.io].
• Once I had something I liked and had shown it to a few people, I felt ready to
  put it on my site.
• I used codesandbox to create a repo named colorpreview.
• My site, dtrejo.com, is a gh-pages site, which means that dtrejo.com/$PROJECTNAME
  will resolve to any $PROJECTNAME github pages site for a repo under
  github.com/dtrejo/$PROJECTNAME
• So I published github.com/dtrejo/colorpreview, and it will show
  under dtrejo.com/colorpreview
• I clone the repo locally (github.com/dtrejo/colorpreview)
• I ran npm run build to create a dist/ folder, which I could then publish
  to gh-pages.
• Problem: the paths on the files were wrong, because they expected to be
  deployed at /, not dtrejo.com/colorpreview.
• Here's the fix for that:
  https://github.com/DTrejo/colorpreview/commit/fe4a316e82d9d29a3444b470b09a7835c60522d9#diff-c8c5ee8e781f831e4927a392fa3565e6L53
  Make sure you edit only the prod configuration.
  js assetsPublicPath: '/colorpreview/', // for github pages off dtrejo.com/colorpreview/*
• Run npm run build again
• move the dist folder somewhere else, e.g. dist-temp, just for now
• Clone your repo into dist (yes, again)
• cd into dist, delete all the files and dotfiles except for the .git folder
• Copy the files from dist-temp back into dist
• add all the files and commit and push them to the gh-pages branch:
  sh git checkout -b gh-pages git add . # repeat from here whenever you rebuild git commit -m 'deploy' git push -u origin gh-pages
• Now check e.g. https://dtrejo.com/colorpreview and you'll see your app!
• The most time consuming part of this was waiting for the webpack prod build to finish :(
• Success!

Thankfully, I spent almost 0 time messing with webpack configs, and developing
modern js apps in codesandbox is super painless. Thank you codesandbox.

It will be cool when it can support building/deploying to gh-pages and/or easy
setup with a CI system that does the same. I suppose I should have investigated
using travis or something to do deploys for me, maybe next time.

Yours,
David Trejo

[babakness]

Hey guys, I have an easier way, although it can be improved once GitLab support arrives.

GitLab has CI tools and task runners via Docker that can be triggered on push to a particular branch, let's say master. You can sync your repo to GitHub and then automate the push to GitLab, which will build your project. From there you can publish via GitLab and serve through CloudFlare.

Another route is to use Netlify. Same procedure, you deploy to GitHub, Netlify pulls in your repo, builds and deploys for you. Combined with an Netlify's CMS (which you can use on GitLab too)

https://github.com/netlify/netlify-cms

you pretty much have a simple, content-driven, static generated, and CDN deployed website all built in the cloud using only a web browser. Could even work on a Chromebook or iPad.

[zixuan75]

Hmm, that does not work for me.