Skip to content

Commit e8d6368

Browse files
lholmquistlholmquist
committed
chore: update getting started guide
1 parent 708adb1 commit e8d6368

File tree

3 files changed

+78
-21
lines changed

3 files changed

+78
-21
lines changed

‎_includes/getstarted/getstarted-steps.html‎

Lines changed: 78 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<div class="width-12-12">
33
<div class="grid-wrapper">
44
<div class="width-3-12 width-12-12-m">
5-
<H2>Prerequests</h2>
5+
<H2>Introduction</h2>
66
</div>
77
<div class="width-9-12 width-12-12-m stepbodyborder">
8-
<p>Before we start, there are some required prerequisites. You need to have Node 8.x and npm 5.2 or greater installed. npm comes with the official node distribution, so if you install Node from Nodejs.org, you should be good.</p>
9-
<p>You’ll also need access to an OpenShift environment or the Red Hat Container Development Kit (CDK) minishift environment. For this example, I’ll be using minishift (instructions on getting minishift up and running).</p>
10-
<p>For my local minishift, I start it with this command:</p>
11-
<code>$ minishift start —memory=6144 —vm-driver virtualbox</code>
12-
<p>You also need to be logged in to whatever OpenShift cluster you are using (OpenShift or minishift) using <code>oc Login</code></p>
8+
<p>This guide we will show how easy it is to deploy an <a href="https://expressjs.com/" target="_blank">Express.js Application</a> to Openshift in just a couple steps using the Nodeshift CLI</p>
9+
10+
<p>To run the Node.js example, this guide assumes that you have a recent version of Node.js installed. Long Term Support(LTS) and Current Versions can be downloaded from the official <a href="https://nodejs.org" target="_blank">Node.js Organization Site</a>. These downloads also comes with current versions of npm, which is the package manager for Node.js</p>
11+
12+
<p>This guide also mentions a cli tool called <code>npx</code>, this also comes standard with recent versions of npm. To learn more about these tools, see the links in the appendix section at the end of this guide.</p>
1313
</div>
1414
</div>
1515
</div>
@@ -18,13 +18,30 @@ <H2>Prerequests</h2>
1818
<div class="width-12-12">
1919
<div class="grid-wrapper">
2020
<div class="width-3-12 width-12-12-m">
21-
<span class="step-italic">Step</span><span class="step-numeral">2</span>
21+
<span class="step-italic">Step</span><span class="step-numeral">1</span>
2222
</div>
2323
<div class="width-9-12 width-12-12-m stepbodyborder">
24-
<h2>Generate an Express App</h2>
25-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec lobortis turpis. Suspendisse sed quam est. Sed quis mi volutpat, consectetur urna non, commodo quam. Nunc vel est varius, porta justo vel, congue erat. Maecenas interdum sollicitudin ultrices. Nullam fermentum nec dui ac commodo</p>
24+
<h2>Generate an Express.js App</h2>
25+
<p>Generating a new Express.js application can be done fairly easily with the <a href="https://expressjs.com/en/starter/generator.html" target="_blank">Express.js Generator</a>. Using the npx command, the generator doesn't even need to be installed, but can be run like this:</p>
2626
<code>$ npx express-generator .</code>
27-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec lobortis turpis. Suspendisse sed quam est. Sed quis mi volutpat, consectetur urna non, commodo quam. Nunc vel est varius, porta justo vel, congue erat. Maecenas interdum sollicitudin ultrices. Nullam fermentum nec dui ac commodo</p>
27+
<p>This will generate a basic Express.js application in the current directory. If you want to see the application in action locally, be sure to run <code>npm install</code> and then <code>npm run start</code>. In the next step we will be deploying this to an Openshift instance, so running locally is not necessary.</p>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
<div class="component-wrapper two-column-content-band">
33+
<div class="width-12-12">
34+
<div class="grid-wrapper">
35+
<div class="width-3-12 width-12-12-m">
36+
<span class="step-italic">Step</span><span class="step-numeral">2</span>
37+
</div>
38+
<div class="width-9-12 width-12-12-m stepbodyborder">
39+
<h2>Deploy the Application to Openshift</h2>
40+
<p>With the application generated, it can now be deployed to an Openshift Cluster* with only one other command using the Nodeshift CLI tool. Again, npx is used so nothing needs to be installed globally</p>
41+
<code>$ npx nodeshift --deploy.port 3000 --expose</code>
42+
<p>While the nodeshift cli has other commands, ttarget="_blankhe default command is to perform an <a href="https://github.com/openshift/source-to-image#overview" target="_blank"> s2i deployment</a>. The deploy port is specificed since by default, express will start applications on port 3000 and the expose flag is used to create a Route, so the application is accessible outside the Openshift Cluster</p>
43+
44+
<p>* This guide assumes access to an Openshift Cluster, see the appendix section below for links on getting access to an Openshift Cluster</p>
2845
</div>
2946
</div>
3047
</div>
@@ -36,10 +53,34 @@ <h2>Generate an Express App</h2>
3653
<span class="step-italic">Step</span><span class="step-numeral">3</span>
3754
</div>
3855
<div class="width-9-12 width-12-12-m stepbodyborder">
39-
<h2>Update the package.json File</h2>
40-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec lobortis turpis. Suspendisse sed quam est. Sed quis mi volutpat, consectetur urna non, commodo quam. Nunc vel est varius, porta justo vel, congue erat. Maecenas interdum sollicitudin ultrices. Nullam fermentum nec dui ac commodo</p>
41-
<code>$ npx json -I -f package.json -e ‘this.scripts.start=“PORT=8080 node ./bin/www”’</code>
42-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec lobortis turpis. Suspendisse sed quam est. Sed quis mi volutpat, consectetur urna non, commodo quam. Nunc vel est varius, porta justo vel, congue erat. Maecenas interdum sollicitudin ultrices. Nullam fermentum nec dui ac commodo</p>
56+
<h2>Access your application</h2>
57+
<p>Once the application deployed, there are a couple of ways to interact with it.</p>
58+
<p>
59+
1. Using Openshift Developer Topology view, it is easy to see our running Application pod. This might looks something like this:
60+
</p>
61+
<p>
62+
<img src="../assets/images/getting_started/express-generator-1.png" alt="Openshift Web Console showing a running pod">
63+
</p>
64+
<p>
65+
Clicking on the top right icon of the circle(this is the running application inside a Kubernetes Pod) will then open up the "Welcome To Express" Web Page, which will look like this:
66+
</p>
67+
<p>
68+
<img src="../assets/images/getting_started/express-web-page.png" alt="Welcome to Express">
69+
</p>
70+
71+
<p>
72+
2. Another, less UI friendly way, is to use <code>curl</code> to access the applications Route which might look like this:
73+
<p>
74+
<code>
75+
$ curl http://express-generate-express-tutorial.apps-crc.testing/
76+
</code>
77+
</p>
78+
79+
80+
This will return some HTML code, that looks pretty ugly in a terminal
81+
82+
Note, that the url will be different based on the Openshift Cluster and namespace used.
83+
</p>
4384
</div>
4485
</div>
4586
</div>
@@ -48,15 +89,31 @@ <h2>Update the package.json File</h2>
4889
<div class="width-12-12">
4990
<div class="grid-wrapper">
5091
<div class="width-3-12 width-12-12-m">
51-
<span class="step-italic">Step</span><span class="step-numeral">4</span>
92+
<span class="step-italic">Appendix</span><span class="step-numeral"></span>
5293
</div>
5394
<div class="width-9-12 width-12-12-m stepbodyborder">
54-
<h2>Deploy the Application to OpenShift</h2>
55-
<p>Before we start, there are some required prerequisites. You need to have Node 8.x and npm 5.2 or greater installed. npm comes with the official node distribution, so if you install Node from Nodejs.org, you should be good.</p>
56-
<p>You’ll also need access to an OpenShift environment or the Red Hat Container Development Kit (CDK) minishift environment. For this example, I’ll be using minishift (instructions on getting minishift up and running).</p>
57-
<p>For my local minishift, I start it with this command:</p>
58-
<code>$ npx nodeshift —strictSSL=false —expose</code>
59-
<p>You also need to be logged in to whatever OpenShift cluster you are using (OpenShift or minishift) using <code>oc Login</code></p>
95+
<h2>Extra Resources</h2>
96+
<p>
97+
<h3>Openshift</h3>
98+
<p>If you do not already have access to an Openshift Cluster, you can start a local copy by using <a href="https://developers.redhat.com/products/codeready-containers/overview" target="_blank" >Code Ready Containers.</a>. Note that you will need to create a Red Hat Developers login to download.</p>
99+
</p>
100+
101+
<p>
102+
<h3>Node.js</h3>
103+
<p>
104+
Node.js is an open-source, cross-platform, JavaScript runtime environment. It executes JavaScript code outside of a browser. For more information on using Node.js, <a href="https://nodejs.org" target="_blank">see the Node.js Website</a>.
105+
</p>
106+
</p>
107+
108+
<p>
109+
<h3>npm</h3>
110+
<p>npm is the world’s largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well. npm's <a href="https://www.npmjs.com/" target="_blank">website is here</a> </p>
111+
</p>
112+
113+
<p>
114+
<h3>npx</h3>
115+
<p>npx is a tool intended to help round out the experience of using packages from the npm registry — the same way npm makes it super easy to install and manage dependencies hosted on the registry, npx makes it easy to use CLI tools and other executables hosted on the registry. npx is included with npm and is installed with the basic Node.js installer</p>
116+
</p>
60117
</div>
61118
</div>
62119
</div>

‎assets/images/getting_started/express-generator-1.png‎

79.5 KB
Loading

‎assets/images/getting_started/express-web-page.png‎

18.1 KB
Loading

0 commit comments

Comments
 (0)