Introduction to Javascript

We can declare variables as a shorthand to store information. The reasons we want to do this is to make our code more readable and potentially more reusable.



If we wanted to print out a long string of text without variables would look like this



<pre class="wp-block-code"><code>console.log("This is a very long sentence with lots of words in it");</code></pre>



This is what it would look like with a variable



<pre class="wp-block-code"><code>var longString = "This is a very long sentence with lots of words in it";

console.log(longString);</code></pre>



In addition, you'll eventually run into a situation where you will have to use the same values in many places in your code. 



Lets say we wanted to call <code>console.log</code> not once but twice. Without variables this is how we'd do it



<pre class="wp-block-code"><code>console.log("This is a very long sentence with lots of words in it");

console.log("This is a very long sentence with lots of words in it");</code></pre>



With variables we don't need to spend all that time writing the same sentence all over again



<pre class="wp-block-code"><code>var longString = "This is a very long sentence with lots of words in it";

console.log(longString);

console.log(longString);</code></pre>



This might not seem like much now, but as you develop complex software and the amount of lines in your code increase, it would be difficult to pass values directly to a function without using variables.

Variables in Javascript

Hello world in Javascript

Understanding the call function in Javascript

Understanding Array.unshift

Understanding Array.shift

Reverse in Parenthesis

Intro to a2 hosting with Node.js

<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=2IcqTW4g7Nk
</div></figure>



First, we want to set up make sure we're in our CPanel interface, which should look like the following



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.28.17-PM-1024x616.png" alt="" class="wp-image-301" width="768" height="462"/></figure>



Then, we want to scroll down to Software and select Setup Node.js App, This should take you to a panel that looks like the following



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.32.33-PM-1024x625.png" alt="" class="wp-image-302" width="768" height="469"/></figure>



Lets hit the orange create application button on the top right corner, you should be sent to a set of options that look like the following



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.34.31-PM-1024x641.png" alt="" class="wp-image-303" width="768" height="481"/></figure>



Lets set our Node.js version to be 12.9.0 and then add an application root and our application url. Note that this will be the url of the root of our application. This is important to note when we start looking at setting up Express.



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.38.24-PM-1024x639.png" alt="" class="wp-image-305" width="768" height="479"/></figure>



Now hit the orange create button and you should see that your node application is ready and running



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.40.04-PM-1024x631.png" alt="" class="wp-image-306" width="768" height="473"/></figure>



Now we can go to the application url and we will see the following hello world page show up



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.41.33-PM-1024x537.png" alt="" class="wp-image-307" width="768" height="403"/></figure>



But what if wanted to make a change, first we'd need to go back to our CPanel interface, then we go to the file manager, whose icon looks like the following



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.42.58-PM.png" alt="" class="wp-image-308" width="288" height="92"/></figure>



Then search for the folder with the name we used for the Application Root column when we set up our application. It should contain the following files



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.43.46-PM-1024x75.png" alt="" class="wp-image-309" width="768" height="56"/></figure>



We can go on app.js and update the message inside, I'm going to update the message to say "Welcome to Victoryflame!!!"



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.45.55-PM-1024x547.png" alt="" class="wp-image-311" width="768" height="410"/></figure>



Then I'll press the blue button to save my changes. I'll want to go back into our CPanel interface and select Setup Node.js app again. This time, we want to select the restart application icon next to the project we just created



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.47.29-PM-1024x505.png" alt="" class="wp-image-312" width="768" height="379"/></figure>



Now when we go back to our application url, we should see our updated message



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-16-at-9.48.30-PM-1024x599.png" alt="" class="wp-image-313" width="768" height="449"/></figure>

How to set up a Node.js app on A2 Hosting

Set up ES6 and React with an Express application on A2 Hosting

Create an Express Application with A2 Hosting

<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=BAD5JyOymRg
</div></figure>



Lets go into our Setup Node.js app on CPanel, then we want to select the Application we worked on in the previous video



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-17-at-8.22.21-AM-1024x574.png" alt="" class="wp-image-316" width="768" height="431"/><figcaption> </figcaption></figure>



This is the project we want to setup Express on



So lets go back to CPanel and go into File Manager. Next, go to the folder containing the Express project you worked on (in my case is A2nodejs)



Next you want to create a package.json with the following information



<pre class="wp-block-code"><code>{
 "name": "app",
 "version": "1.0.0",
 "description": "My App",
 "main": "app.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
 "build": "./node_modules/parcel-bundler/bin/cli.js public/index.js --out-dir public/dist"
 },
 "dependencies": {
 "express": "^4.17.1",
 "ejs": "~2.6.1",
 },
 "author": "",
 "license": "ISC"
}</code></pre>



Then we want back into our nodejs a2 hosting project (via the Setup Node.js panel)



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-17-at-8.32.32-AM-1024x528.png" alt="" class="wp-image-317" width="768" height="396"/></figure>



Click on the orang Stop App button



Next we want click the white NPM install button at the bottom



<figure class="wp-block-image size-large is-resized"><img src="https://victoryflame.a2hosted.com/cms/wp-content/uploads/2020/07/Screen-Shot-2020-07-17-at-8.34.51-AM.png" alt="" class="wp-image-318" width="318" height="90"/></figure>



Let's go back into our File Manager and back into root of the project we were working on. There, we want to create a new folder views with a file named index.ejs



Inside index.ejs, we want to put in the following



<pre class="wp-block-code"><code>&lt;h1&gt;Hello Victoryflame Express&lt;/h1&gt;</code></pre>



Then we want to go into our app.js file in our root directory and replace everything inside it with the following



<pre class="wp-block-code"><code>var express = require('express');
var app = express();
var path = require('path');

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');


app.use('/a2nodejs/static', express.static('public'));

app.get('/a2nodejs', (req, res) =&gt; {
 res.render('index', { title: 'Express' });
});

app.listen();</code></pre>



Now go back into Setup Node.js section and restart our A2 hosting application



Go to the url of our project and you should see the html from our index.ejs being served



But what if we wanted our ejs file to have data that comes from our server.



To do that, go into your index.ejs file and replace Express from the following



<pre class="wp-block-code"><code>&lt;h1&gt;Hello Victoryflame &lt;%=title%&gt;&lt;/h1&gt;</code></pre>



Now go to our application url and you should see our updated page

Intro to the Spread Operator

How to stop node processes in a2 hosting shared hosting service by creating a chron-job

Tutorials, articles and quizzes on Software Development

More Articles