Todd Rodzen

Agile Application Development, DevOps, Cloud Architecture Engineering



moving jsfiddle Vue.js code to a single html page

If you are new to js often times simple test code is shown in an online code editor like It’s a great way to quickly get up and running on the desired task like your great Hello World example. But then how do you move that code to a served web page?

Of course there are many ways. You could use node and npm  There are better methods for the long term if you are building say a full app but if you want to dump your test code on your own server because you need access to other local resources like you images directory then this is one method to copy the Vue.js code.

When using a simple Vue.js code and using a CDN to load Vue you must do a couple things in a single HTML page.

  1. load the Vue.js CDN
  2. load the new Vue function when the page loads (window.onload is one method)
  3. It’s good practice to also hide all the elements when loading with the v-cloak directive. This way your Vue code doesn’t splash on the browser while Vue is doing its work.

Here’s that great fiddle.


Here’s the code when moved to a single HTML page run on an AWS Linux Apache server.

Gist Github code

Obviously, this is a very simple task. This shows a quick way to move a section of code to your own server for further development. The window.load function runs your Vue code. The v-cloak directives also hide your code until Vue is done loading.

The original purpose of the Hello World jsfiddle was to load “Hello World” in the data in the message variable. Vue then replaces code in the DOM inside {{ }} (“mustache”) variables with the data. But more importantly, this creates a reactive link to that Vue “message” variable so the data can be changed.


AMI Build All-in-One

Full build process

  1. Create an EC2 Linux Instance base – Amazon Linux AMI 2016.09.1 (HVM), SSD Volume Type – ami-0b33d91d
  2. Install the LAMP Stack default Apache port set to 8080 as it will be served to an Nginx reverse proxy server on the same instance (Apache 2.4, MySQL, PHP 6.7)
  3. Install the MEAN Stack
  4. Install Nginx Reverse Proxy Server
  5. Install ColdFusion 2016 update 3 Server

The server is setup and available for Free with a service contract from GTK Solutions.

ColdFusion on EC2 Server

Here we will install ColdFusion 2016 on an Amazon EC2 Linux server with Apache 2.4.

Get the ColdFusion installation .bin file from Adobe at be sure to select Linux 64bit on the download.

  1. Adjust the authority of the /opt directory to allow ec2-user (group www) permission
    sudo mkdir /opt/cf
    sudo chown -R root:www /opt
    sudo chmod 2775 /opt
    find /opt -type d -exec sudo chmod 2775 {} \;
    find /opt -type f -exec sudo chmod 0664 {} \;
  2. Then send the ColdFusion installation .bin to /opt/cf directory on the EC2 server with Filezilla.
  3. Install the JDBC mysql database driver
    sudo yum install mysql-connector-java.noarch

    Enter Y at the prompt to complete the driver installation

    Is this ok [y/d/N]: y
  4. Go to the /opt/cf directory, set execute authority on the .bin file, and start the ColdFusion .bin installation
    cd /opt/cf
    chmod 777 ColdFusion_2016_WWEJ_linux64.bin
    sudo ./ColdFusion_2016_WWEJ_linux64.bin
  5. Follow the prompts and take the defaults on the ColdFusion installation.
    1. hit [enter] 31 times
    2. Y [enter] to Accept the terms of the license
    3. 3 [enter] to select Developer edition
    4. default 1 [enter] to select server configuration
    5. 3 [enter] to select development profile
    6. default 5 [enter] to continue installation
    7. [enter] default remote component admin profile
    8. [type an remote component administrator password] [enter]
    9. re-enter the remote component administrator password [enter]
    10. default n [enter] to access add-on services remotely
    11. /opt/cf absolute path install folder
    12. Y [enter] the path is correct
    13. 1 [enter] add web server configuration
    14. 1 [enter] Apache
    15. /etc/httpd/conf [enter] Apache configuration directory
    16. /usr/sbin/httpd [enter] Apache program binary file
    17. /etc/init.d/httpd [enter] control file used to start and stop apache server
    18. N [enter] configure advanced settings
    19. 4 [enter] Continue with installation
    20. N [enter[  configure websocket proxy
    21. ec2-user [enter] runtime user name
    22. 2 [enter] skip open local open office installation
    23. [type an administrator password] [enter]
    24. re-enter the administrator password [enter]
    25. Y [enter] enable RDS
    26. [type an RDS administrator password] [enter]
    27. re-enter the RDS administrator password [enter]
    28. Y [enter] automatically check for updates
      Pre-installation Summary
      Installation Type:
       Server configuration
       Developer Edition
      Installation Directories:
       Product: /opt/cf
      Server Information:
       Admin Port: 8500
       Web Server: Apache (/etc/httpd/conf)
       Connector Port: 80
       ColdFusion Server Profile: Development Profile
       ColdFusion Solr Search Services: installed
       ColdFusion Pdfg Services: installed
       RDS: enabled
      Disk Space Information (for Installation Target):
       Required: 1,325 MB
       Available: 5,045 MB
    29. [enter] to continue
  6. Start the ColdFusion server
    cd /opt/cf/cfusion/bin
    sudo ./coldfusion start
  7. Using a web browser navigate to the admin page using your host domain
  8. enter the admin password
  9. hit OK button to complete the installation
  10. Download the mysql JDBC connector .tar file from and unpack it on your local machine. Then use Filezilla to copy the mysql-connector-java-5.1.40-bin.jar file to the /opt/cf/cfusion/lib directory
  11. restart the cold fusion server
    cd /opt/cf/cfusion/bin
    sudo ./coldfusion restart

    MySQL 5 ODBC database driver will now work. Now you can configure a database in data sources of the ColdFusion Administrator.

This completes the ColfFusion server installation.

LAMP on Linux Amazon EC2

As you recall in the recent post Create an EC2 Linux Server I used the standard Amazon Linux AMI image to create an EC2 server. Now let’s get it to host some things.

  1. first step is to allow it to update it initial set of packages type
     sudo yum update
  2. at the prompt type hit Yes
    Is this ok [y/d/N]: y
  3. sudo is the comand to “run as root user” it get’s old typing sudo all the time so lets set it to always use root with the following command
    sudo -i
  4. install the http server, php, and mysql driver
    yum install -y httpd24 php70 mysql56-server php70-mysqlnd
  5. Use the chkconfig command to configure the Apache web server to start at each system boot.
    chkconfig httpd on


    The chkconfig command does not provide any confirmation message when you successfully enable a service. You can verify that httpd is on by running the following command.

    chkconfig --list httpd httpd 0:off 1:off 2:on 3:on 4:on 5:on 6:off

    Here, httpd is on in runlevels 2, 3, 4, and 5 (which is what you want to see).

  6. To allow ec2-user to manipulate all files add the ec2-user to the root group. As write ability is needed in the future you can simply add group write permission.
    sudo usermod -a -G root ec2-user
  7. Amazon uses a different method by creating a www group. My method is simpler by only using the root group but maybe not as secure. The www group method is defined below. It comes from Amazon here.To allow ec2-user to manipulate files in the /var/www directory, you need to modify the ownership and permissions of the directory and files. There are many ways to accomplish this task; in this tutorial, you add a www group to your instance, and you give that group ownership of the /var/www directory and add write permissions for the group. Any members of that group will then be able to add, delete, and modify files for the web server.

    To set file permissions

    1. Add the www group to your instance.
      [ec2-user ~]$ sudo groupadd www
    2. Add your user (in this case, ec2-user) to the www group.
      [ec2-user ~]$ sudo usermod -a -G www ec2-user


      You need to log out and log back in to pick up the new group. You can use the exit command, or close the terminal window.

    3. Log out and then log back in again, and verify your membership in the www group.
      1. Log out.
        [ec2-user ~]$ exit
      2. Reconnect to your instance, and then run the following command to verify your membership in the www group.
        [ec2-user ~]$ groups ec2-user wheel www
    4. Change the group ownership of /var/www and its contents to the www group.
      [ec2-user ~]$ sudo chown -R root:www /var/www
    5. Change the directory permissions of /var/www and its subdirectories to add group write permissions and to set the group ID on future subdirectories.
      [ec2-user ~]$ sudo chmod 2775 /var/www [ec2-user ~]$ find /var/www -type d -exec sudo chmod 2775 {} \;
    6. Recursively change the file permissions of /var/www and its subdirectories to add group write permissions.
      [ec2-user ~]$ find /var/www -type f -exec sudo chmod 0664 {} \;

    Now ec2-user (and any future members of the www group) can add, delete, and edit files in the Apache document root. Now you are ready to add content, such as a static website or a PHP application.

  8. Create a PHP test file in the www server document root
    echo "" > /var/www/html/phpinfo.php
  9. Change the group of the http Apache server config files to allow editing
    chmod 664 /etc/httpd/conf/httpd.conf

    or using Amazon’s method:

  10. sudo chown -R root:www /etc/httpd/conf
    sudo chmod 2775 /etc/httpd/conf
    find /etc/httpd/conf -type d -exec sudo chmod 2775 {} \;
    find /etc/httpd/conf -type f -exec sudo chmod 0664 {} \;
  11. Using Filezilla or WinSCP do a SCP connection to the server and navigate to the http apache server config directory /etc/httpd/conf and edit the httpd.conf file. Add the virtual host directives to the bottom of the file.UU
     # This first-listed virtual host is also the default for *:80
     DocumentRoot "/var/www/html"
    # ServerName
    # DocumentRoot "/var/www/html/mydomain2"
    # ServerName
    # ServerAlias
    # DocumentRoot "/var/www/html/mydomain3

    Uncomment the ServerName and enter your own domain. and also the 2nd and 3rd virtual hosts are fully commented out with the # (just remove the #’s to create the virtual host.)  name the ServerName it with your additional domain name and root directory. Add as many virtual hosts as needed. When done editing upload the file back to /etc/httpd/conf

  12. BONUS: Do you need GD image library support and OpCode Cash both used by drupal? do the following:
     yum install php70-gd
    sudo yum install php70-opcache
    # Install additional commonly used php packages
    sudo yum install php70-imap
    sudo yum install php70-mbstring
    sudo yum install php70-pdo
    sudo yum install php70-pecl-apcu
  13. Start the Apache web server.
    [ec2-user ~]$ sudo service httpd start Starting httpd: [ OK ]
  14. Use a browser to navigate to the server root and to phpinfo.php page you should get the amazon linux test page and the PHP information page show below.linux-test-pagephp-test-page

The Apache 2.4 webserver is now running with PHP and virtual hosts. If you wish to install mysql and phpMyAdmin on this server follow the directions on Amazon I will use the RDS server and mysql Workbench instead.

Powered by

Up ↑