Go to https://zeit.co and create a free account. We use their 'NOW' product to deploy our apps for testing in the cloud. Install the 'NOW' client.
Instead, you could zip up the folder /public and deploy to any
static web hosting service via FTP. However, we will need some 'dynamic', server-side features later, so we wrap our static webroot content with some code that works on a Node.js server, such as used by 'NOW'.
Rename /public/cache.mfx to cache.mf.
To deploy to zeit.co: With the project 'topseed-helloworld' open in VS Code, open a Terminal Shell by selectingg menu View-Integrated Terminal (or pressing `(Ctrl+Shift+)In the console that opens, change directory with 'cd helloworld-topseed-io [Enter]' and then trigger the zeit.co deployment by typing 'now [Enter]'. Follow the prompts. (For advanced users: this folder includes index.js and package.json needed by Node.js.) When the console shows 'Ready!', click on the URL that follows while holding the '[Ctrl]' key to open a browser. Once deployment is completed, the app will display. Bookmark the URL. You are in the Cloud and live on the Web!
To run the project in Node on your machine (you will need this for tutorials that follow): Install Node.js and NPM. If you have a Mac, follow the instructions at http://blog.teamtreehouse.com/install-node-js-npm-mac. If you have Windows, download and run the installer from https://nodejs.org/en/download/, accept the default settings, and restart your computer. Reopen the project 'topseed-helloworld' in VS Code. Select menu View-Integrated Terminal. On the command line that opens, change directories with 'cd helloworld-topseed-io'. To test Node, type 'node -v' and hit Enter. You should see a version number like v8.0.0. To test NPM, type 'npm -v' and hit Enter. You should see a version number like 4.0.3. Use Google to troubleshoot the install of Node and NPM for your operating system if necessary.
You are almost ready to run the app in Node. First you will use NPM to download the dependencies listed in /package.json. Go back to the Terminal Shell, make sure you are in the /helloworld-topseed-io directory, then type 'npm install' and hit Enter. This will install the dependencies in a /node_modules directory. It will take a while, but the console will tell you when done. (Repeat this step when you add a dependency yourself.)
Inspect /helloworld-topseed-io/index.js. This is the JavaScript file that starts the app, including an 'express' HTTP server. Return to the Terminal Shell (still in the /helloworld-topseed-io directory) and type 'node index' (you can omit the .js) and hit Enter to start the app. You should see output like 'App listening at http://localhost:8888'. (To stop it, you would press Ctrl+C). Click on the URL that follows while holding the '[Ctrl]' key to open a browser.
Read the remainder of this tutorial. Execute the steps if you are preparing for QA/Staging/Production. To give your site a 'proper' domain, you will need a domain name and DNS. If you do not have a domain yet, we recommend to register a cheap domain at https://www.namecheap.com now and have it use the namecheap DNS.
If you already own a domain and host a site, e.g. at www.mydomain.com, you may want to configure a CNAME to map a 'staging.' subdomain, such as staging.mydomain.com, so you can keep using 'www.' for your public site. See below for more detailed instructions.
For scalability and caching, you will also want to use a Content Delivery Network (CDN). With a CDN, you also get SSL/HTTPS for free. No need to buy an expensive SSL certificate. SSL is important when using advanced Javascript functions in the browser, such as cross-domain data requests. We recommend https://www.cdn77.com. For this tutorial, register for the CDN77 14-day free trial now.
In the CDN77 web app, go to menu item CDN and click 'ADD NEW CDN RESOURCE'. Give it a label, such as 'staging.mydomain.com' and select 'My Origin'. As domain, specify HTTPS and the zeit.co DOMAIN from the URL you bookmarked under 2. (e.g. topseed-helloworld-oosnsyzlphl.now.sh). Click 'CREATE CDN RESOURCE'.
Choose 4-step setup with CNAME. Click 'Add new CNAME', and '+ ADD CNAMES'. Enter 'staging.mydomain.com' and Click 'ADD CNAME'. Click 'Go back to Integration'. In Step 2, copy the DOMAIN NAME (AKA HOST), e.g 1234567890.rsc.cdn77.org, then follow instructions for your hosting provider. If your domain is with namecheap.com, do the following: On the Namecheap dashbord, click 'Manage' for your domain, and 'Advanced DNS'. Click 'ADD NEW RECORD', select 'CNAME' and enter the following: Host: staging Value: [DOMAIN NAME from clipboard, e.g. 1234567890.rsc.cdn77.org], TTL: Automatic. Click the checkmark to save. No need to do CDN77 Step 3. One final step is to go to the 'Other Settings' tab, check 'HTTPS redirect' and click 'SAVE CHANGES'.
After an hour after the initial setup, you should be able to reach the deployed site in your browser under e.g. https://staging.mydomain.com. Note the use of 'https'. If you visit too quickly, the browser will complain that the site certificate is invalid. If this happens, try again after a while. The CDN caches static files for greater performance in multiple distributed datacenters. For advanced users: Review /topseed-srv/util/Decider.js. Find uses of 'U.cache'; this sets Cache-Control response headers which tell th CDN how long to keep content before refreshing it from the source. The utils library 'U' is included in the project https://github.com/topseed/topseed-npm, deployed to npmjs, and imported to the project through a 'package.json' dependency.
Edit /public/page/one/_hello.md again (see Lab 1: 5.). To deploy the change, follow step 2 above. In CDN77 Overview, change 'What is your domain?' to the new URL, and click 'SAVE CHANGES'. To make the changes appear on the CDN edge servers immediately, use CDN77 'CDN/Purge' on /page/one/.
Optional: Once you are ready to move from staging to production, you would either edit the CNAME for www to point to the same CDN domain (e.g. 1234567890.rsc.cdn77.org) or add a new CDN resource such as www.mydomain.com that may also use a new zeit.co domain created when redeploying the app to zeit.co 'NOW' (see step 2. above).