How to Start a Business in an Afternoon Using Python and Dash
By: Eric Kleppen
Tags: Programming, Entrepreneurship, Business, Web Development, Marketing

Creating index.py

Now it’s time for the fun part… The code! Start by loading dependencies for Dash and the component libraries:

import dash

import dash_core_components as dcc

import dash_html_components as html

import dash_bootstrap_components as dbc

from dash.dependencies import Input, Output, State

from dash.exceptions import PreventUpdate import flask

from flask import Flask

Notice I import flask too. That will make hosting the Dash app simpler, so I recommend including it.

Instantiate the Flask server and Dash. To use Dash bootstrap components, set the external_stylesheets value to dbc.themes.BOOTSTRAP

server = Flask(__name__) app = dash.Dash(__name__,server = server ,meta_tags=[{ "content": "width=device-width"}], external_stylesheets=[dbc.themes.BOOTSTRAP]) app.config.suppress_callback_exceptions = True

Notice I set the config option suppress_callback_exceptions to True. This Dash project does not actually require any callbacks. Regardless, I include this bit of code in case I decide to build a multi-page website with advanced features in the future.

The Dash App Layout

The template layout is a simple pattern using Dash HTML and Dash Bootstrap components. No callbacks are necessary since the page doesn’t use any interactive Dash components:

Website Template

Notice the Headers and footers are created using dbc.Jumbotron. A Jumbotron is a lightweight component that helps content stand out. It takes up a lot of space on the screen which makes it great for showcasing buttons and messages.

You can simply replace the bold values with your own, but I recommend playing around and adding more components to customize the header and footer. You can even use an image or insert a custom logo!

header = dbc.Jumbotron([dbc.Container([

html.H1("Your_Website_Here.Com", className="display-3"),

html.P("Find super deals at Your_Website_Here.com"),

html.Hr(className="my-2"),

html.P(" " " "),

html.P(" ")

], fluid=True) #end container

], fluid=True)# end jumbo footer = dbc.Jumbotron([dbc.Container([

html.H1("Your_Website_Here.com"),

html.P(''),

html.P("123 Fake ST NE", style= {'text-align': 'center'}),

html.P("MN 55445", style= {'text-align': 'center'}),

html.Hr(className="my-2"),

html.P(''),

html.P('Copyright © 2020 Your_Website_Here - All Rights

Reserved.')

],fluid=True)#end container

] ,fluid=True)#end jumbo

Notice I use html.P as placeholders. That way it is easy to add a tagline or more text if needed.

To programmatically create the dbc.Card components that store the image link, I create a helper function named make_card():

def make_card(alert_message, color, cardbody, style_dict = None):

card = html.Div([html.P(" ")

, dbc.Card([dbc.Alert(alert_message, color=color)

,dbc.CardBody(cardbody)])#end card

,html.P(" ")

,html.P(" ")

])#end div

return card

Notice the function uses dbc.Alert to automatically create a colored header for the card.

Next I’ll create a function to help build the series of cards inside the dbc.Container between the jumbotrons.

def create_body(items):

b = []

for item in items:

b.append(dbc.Col(make_card(item[0], "primary", item[1])))

return b

Notice I wrap the make_card function with dbc.Col so the cards are spaced apart in the UI.

Notice the make_card function takes in a list of lists and uses the first value, item[0], for the card’s dbc.Alert message and the second list value, item[1], for the card’s dbc.Cardbody.

Now it is time to populate the cards using the items I want to promote!

Add Products by Creating a List of Links

In a text editor, paste the html that copied from clicking the Highlight HTML button after searching for items on the Affiliate page. It will look something like this, but it will appear as a long string:

Notice the link contains 3 components:

1. An HTML “a” tag with a href value.

2. An HTML “img” tag with src value inside of the “a” tag from part 1.

3. An HTML “img” tag outside the “a” tag.

I will only use the first 2 parts. Using the Dash HTML component library, it is easy to recreate the link’s component structure. In addition to the link, I give the link a name. For example, if I have 1 item in the item list:

item_lists = [

["item_name", html.A(id = 'item1', href= value

,children = [html.Img(src = value)])]#end item 1

] #end item list

Notice the list begins with item_name, followed by the affiliate link.

Notice, I give the html.A component a unique ID. That will make it easier to use in callbacks.

Construct the Layout

Now that the layout components can be constructed using the functions, and the item_lists is populated with affiliate links, I’ll put it all together and set the app.layout.

def create_layout():

layout = html.Div(style={

'background-image': 'url("/assets/people-2557483.jpg")',

'background-position': 'center',

}, children = [

header

, dbc.Container(id = 'card-cont', children = [dbc.Row(create_body(item_list))], style = {'background-color':'white', })# end container

, footer

] #end children

) #end div

return layout app.layout = create_layout() if __name__ == '__main__':

app.run_server(debug = True)

Notice the function create_layout pulls the background image from the assets folder.

Notice I pass the item_lists into create_body function inside the children argument for dbc.Container.

Congratulations! You just created your first affiliate website!

Landing Page Template

Complete Code

Here is the complete website template code! You will need to populate the item_lists with your own links.

import dash

import dash_core_components as dcc

import dash_html_components as html

import dash_bootstrap_components as dbc

from dash.dependencies import Input, Output, State

import dash_table

from dash.exceptions import PreventUpdate import flask

from flask import Flask server = Flask(__name__)

app = dash.Dash(__name__,server = server

,meta_tags=[{ "content": "width=device-width"}]

, external_stylesheets=[dbc.themes.BOOTSTRAP]) app.config.suppress_callback_exceptions = True header = dbc.Jumbotron([dbc.Container([

html.H1("Your_Website_Here.Com", className="display-3"),

html.P("Find super deals at Your_Website_Here.com"),

html.Hr(className="my-2"),

html.P(" " " "),

html.P(" ")

], fluid=True) #end container

], fluid=True)# end jumbo footer = dbc.Jumbotron([dbc.Container([

html.H1("Your_Website_Here.com"),

html.P(''),

html.P("123 Fake ST NE", style= {'text-align': 'center'}),

html.P("MN 55445", style= {'text-align': 'center'}),

html.Hr(className="my-2"),

html.P(''),

html.P('Copyright © 2020 Your_Website_Here - All Rights Reserved.')

],fluid=True)#end container

] ,fluid=True)#end jumbo def make_card(alert_message, color, cardbody, style_dict = None):

return html.Div([html.P(" ") , dbc.Card([dbc.Alert(alert_message, color=color)

,dbc.CardBody(cardbody)])#end card

,html.P(" ")

,html.P(" ")

])#end div def create_body(items):

b = []

for item in items:

b.append(dbc.Col(make_card(item[0], "primary", item[1])))

return b def create_layout():

layout = html.Div(style={

'background-image': 'url("/assets/YOUR-BACKGROUND.jpg")',

'background-position': 'center',

}, children = [

header

, dbc.Container(id = 'card-cont', children = [dbc.Row(create_body(item_lists))], style = {'background-color':'white', })# end container

, footer

] #end children

) #end div

return layout item_lists = [["coca cola t-shirt" , html.A(id = 'item1', href="item link", children = [html.Img(src="image link" )])]

, ["coca cola t-shirt" , html.A(id = 'item2', href="item 2 link", children = [html.Img(src="image 2 link" )])] ]# end item list app.layout = create_layout() if __name__ == '__main__':

app.run_server(debug = True)

Now that the landing page is completed, it is time to explore hosting the Dash App.

Hosting the Dash App

Before getting into it, to host the dash app you will want two things:

A domain name A web server

If you’re interested in learning how to set up users and authentication, check out my tutorial, How to Setup User Authentication for Dash Apps using Python and Flask.

Buying Domain Names

To get a domain name for the web site, use a domain name provider like GoDaddy. Domain names are typically pretty cheap! My UJR domain name was UltimateJerkyReview.com

A domain name is an identification string that defines a realm of administrative autonomy, authority or control within the Internet.

Simply search google for cheap domain names, shop around and find the best deal you can! Try to make the domain name relevant to the products you’re trying to sell.

Finding a Web Server

It is fairly easy to find virtual hardware on which you can host a web page. I’ve previously reviewed a few hosting options for DIY web projects. I think the company hetzner.com offers some of the best prices for the amount of compute power available. I’ve used DigitalOcean a few times too. Both are stable and affordable options! It is best to do your own research, but I’d recommend either of those options to start.

To serve the website to external users across the web requires some kind of web server back-end. Nginx is a lightning fast, open-source web server framework that is easy to use and perfect for this use-case! Along with Nginx, I am using uWSGI to set the website to run as a service that runs in the background when the Linux operating system boots up.

Although it isn’t difficult to host the website, the process contains many steps. Review the complete step-by-step guide to hosing Dash applications on Linux in my hosting guide:

Once the site is hosted, look into protecting your domain using a service like Cloudflare. Cloudflare offers web-infrastructure and website-security services including DDoS mitigation, Internet security, and distributed domain-name-server services. It is completely free to set up too!