Home / Mobify / Installation of Mobify for Local Development
Mobify

Installation of Mobify for Local Development

In chapter 2 we are going to learn about how we can do Installation of Mobify  in our system for local Mobify development.
1. Install Node.js (URL: https://nodejs.org/en/download/ ).

2. Download the Mobify Client (URL: https://github.com/mobify/mobify-client):
Run the following command in command prompt.
a. For Windows: npm -g install mobify-client.
b. For Linux: sudo npm -g install mobify-client.

3. Create a project scaffold and start the Mobify.js development server:
a. Open command prompt.
b. Type ‘Mobify init myproject’ (‘myproject’ will be project name)
c. Type ‘cd Myproject’ (go to project path, the project folder which contain the json file)
d. Type ‘Mobify preview’
e. Visit the website (https://preview.mobify.com/ ) for local development testing.
f. Enter the hosted site path in Site URL textbox e.g. www.allhelpservices.com.
g. Enter http://localhost:8080/ in Bundle Location Textbox.

mobify_1 Installation of Mobify for Local Development Mobify

Mobify Folder Structure:

When we run the command “mobify init test” in command prompt, the folder structure gets created at the specified path.

In “mobify init test” command, ‘test’ is the name of mobify project & folder named test will be created.

The folder contains the files (project.json & README.md) & folder (src).

  • json’ file work as solution file for our project.
  • md’ file contains the information related to project structure.
  • src’ folder contains the ‘tmpl’ folder & ‘konf & style.css’ files.
  • tmpl’ folder works as a view for our device accessible site.
  • konf’ file works as a heart for the application.
  • css’ file contains the css for the site.

mobify_2 Installation of Mobify for Local Development Mobify

For previewing the mobify application, follow below steps

Step 1: Open the command prompt.

Step 2: Travel to the project path (e.g. travel the folder upto project.json file containing folder)

Step 3: Enter ‘mobify preview’ command.

mobify_3 Installation of Mobify for Local Development Mobify

Step 4: Visit the website preview.mobify.com. For demo purpose I have used test site name as allhelpservices.com.

mobify_4 Installation of Mobify for Local Development Mobify

Step 5: Click on preview button. Below is the demo page for mobify.

mobify_5 Installation of Mobify for Local Development Mobify

In next chapter 3, we will learn how to code in mobify……………….

Introduction to Mobify: Click Here

About Helpservices

About This site (allhelpservices.com) is dedicated to helping other bloggers learn the skills of blogging, wordpress, education, technology, social media sharing , SEO, Electronics, Earn Money From Blogging, Web hosting and web share their own experiences and promote the blogging medium. We started Allhelpservices in August 2015 mainly because we wanted to keep a record of what we wear learning from development and because we wanted to connect with other learners.

Leave a Reply