Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • Creating Code Blocks
  • How Exporting Works
  • Single Page Application API
  • Element Tokens
  • Template Tokens
  • Setting up a server
  • Putting your site online
  • Code Block Snippets
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page

Was this helpful?

Setting up a server

How to setup your local test environment

PreviousTemplate TokensNextPutting your site online

Last updated 4 years ago

Was this helpful?

Testing in the Browser

I recommend using Firefox for testing pages from the file protocol (file://) or Brave for testing from localhost (http://localhost/ or http://126.0.0.1/).

Setting up a server

You can create web pages and test them without a server but eventually you may want use something like XAMPP to install a web server locally.

A web server is server software whose primary function is to store, process and deliver web pages to clients.[1] Pages delivered are most frequently HTML documents, which may include images, style sheets and scripts in addition to the text content.

Some features may or may not work without a server.

In cases where a feature may not work it should be documented.

Actually I recommend using Visual Studio Code and Live Server for working with Web Export as shown here.

Installing a Server on Windows

Video from YouTube user STWebDesigner on setting up XAMPP.

Installing a Server on Mac OSX

Mac OSX comes with a server installed already. If you are fine using a command line then you can use this for testing. If you don't know what a command line see the next video.

If you would like to use a server with an easy to read UI and control panel use the following XAMPP install video.

The video also shows installing Brackets. This may be useful as well but is not required.

After installing a server

Typically, to install a server you simply install something like XAMPP and after it is installed you start it.

Start your server according to it's documentation and then export your web pages to the root folder. The server software will help you with this.

Adding your server to your project

You can test that the server is setup using the server field and server test button and after export you can launch a browser to that page using the server link button.

In the Export Artboard dialog enter the URL to the server.

When a server is setup a server link button will appear after export next to the copy url button and the url button.

It will create a link using the value in the server field and the name of the page. It simply adds the first value to the second value.

For example, if you put a server as, "http://127.0.0.1/'" and the page name is "myPage.html" the link will be "http://127.0.0.1/myPage.html".

Be sure to add a slash, "/" at the end of the server address if it needs it. Web Export will not do this for you since it simply appends the page name.