Building Landing Pages in Vanilla Python with Pynecone in Codesphere

Compelling landing pages are crucial for businesses to attract visitors and turn them into customers. A landing page is a standalone web page that is designed to showcase a product, service, or offer. It is optimized for conversion and often includes a form for lead capture. Traditionally, building a landing page required knowledge of HTML, CSS, and JavaScript. However, with the emergence of low-code website builders and frameworks, even non-technical people can create landing pages.

Pynecone is a new and fast-growing Python framework that is changing the game for Python web development. Pynecone is backed by Y Combinator and has quickly gained popularity due to its ability to build and deploy beautiful landing pages and entire websites in vanilla Python. This means that users no longer need to learn additional front-end languages like HTML, CSS, or JavaScript and frameworks like React. However, these options often required a certain level of technical knowledge or experience. With Pynecone, anyone with basic Python (more amazing Python tutorials) skills can build and deploy amazing-looking landing pages in less than 500 lines of code.

So, why Pynecone?

What makes Pynecone so cool is its simplicity and flexibility. Pynecone uses a minimalist approach to web development, which means that you can focus on building the content and let Pynecone handle the rest. Pynecone has a built-in template engine that allows you to create reusable templates for your landing pages. This means that you can easily make changes to your website’s design without having to update each individual page. In addition, Pynecone is highly customizable, so you can add any Python libraries or modules you want. This gives you the freedom to add functionality to your landing pages without being limited by pre-built features.

One of the benefits of Pynecone is that it is beginner-friendly. For someone who is not very skilled in coding, Pynecone provides an easy and accessible way to create landing pages and websites. The Pynecone documentation is clear and concise, making it easy for users to get started. Moreover, Pynecone’s simplicity makes it an excellent choice for rapid prototyping or for building MVPs (minimum viable products). Pynecone also offers a range of features that make it a versatile framework. For instance, Pynecone supports dynamic content generation, which means that you can generate content on the fly based on user input or other data. Additionally, Pynecone supports data modeling and database integration, making it easy to store and manage data on your website.

How to build and host a Pynecone site in minutes

If you are interested in using Pynecone to build your landing pages or websites, you can easily deploy your Pynecone app on Codesphere. Once deployed, your Pynecone app will be available for the world to see. With the combination of Pynecone and Codesphere, you can create amazing-looking landing pages and websites within minutes.

Here is a step-by-step guide on how to get Pynecone website installed and running in Codesphere:

Create a new workspace: First, log in to your Codesphere account and create a new workspace. Click the “Create Workspace” button and select “Empty Workspace”, provide a name and select resources (micro is sufficient for most cases).

Open a terminal: Once you have created the workspace, open a terminal by clicking on the “Terminal” button at the bottom of the screen.

Install Pynecone: To install Pynecone, type ‘pipenv install pynecone’ in the terminal.

Workaround for Pipenv bug: Sometimes we see a known issue with Pipenv that can cause it to fail when installing certain pre-release packages. To work around this issue, use the following command in the terminal before proceeding: ‘pipenv lock — pre’.

Create a new directory: Type ‘mkdir my_app_name’ in the terminal. Replace “my_app_name” with a name of your choice.

Navigate to the directory: ‘cd my_app_name’.

Activate the Pipenv environment: Type ‘pipenv shell’ in the terminal.

Set a Node version > 12.2: We use Node version to 16.13.2, use the following command in the terminal: ‘sudo -u admin n 16.13.2’.

Initiate Pynecone project: Type ‘pc init’ in the terminal.

Run server: Define a CI Pipeline with the required steps. Navigate to the “CI Pipeline” option next to the terminal option. From there, add: ‘sudo -u admin n 16.13.2’ for the prepare stage and ‘pipenv run pc run’ in the run stage. Then run both steps.

Designing your landing page: Finally, we will add a background image, product image, some basic grid layout and our headline followed by a call to action. Our app.py look like this:

"""This is an example of a product landing page built in pynecone"""
from pcconfig import config

import pynecone as pc


filename = f"{config.app_name}/{config.app_name}.py"


class State(pc.State):
    """The app state."""

    pass


def index() -> pc.Component:
  return pc.center(
	pc.grid(
		pc.grid_item(
			pc.heading("Fresh.", font_size="4em", color="white"),
			pc.heading("Handpicked.", font_size="4em", color="white"),
			pc.heading("Bottled on site.", font_size="4em", color="white"),
			pc.text("Welcome to Olive.Co! We pride ourselves in the quality of our olives.",
				color="white"),
			pc.text("The purest olive oil you will find. Period.", 
				color="white"),
			pc.button("Try it now", color="white", size="lg", variant="outline", 
				margin_top="2em",
					),
				row_span=1, col_span=1, align_self="center", gap=2),
		pc.grid_item(
			pc.image(src="/olive.webp", width="14em"),
				row_span=1, col_span=1),
			template_columns="1fr 1fr",
			gap=0,
		),		
        padding_top="10%",
		background_image="/background.webp",
		background_position="center",
		background_size="cover",
		background_repeat="no-repeat",
		height="100vh"
    )


# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()

This is what our example page looks like

Give it a Try!

Pynecone is a powerful tool for building and deploying web applications, and using it in conjunction with Codesphere can make the development process even easier and more efficient. With its intuitive interface and helpful features, Pynecone allows developers to focus on writing code and building applications without worrying about the complexities of deployment and server management. Additionally, the easy-to-follow steps we’ve provided make it simple for anyone to get started with Pynecone and Codesphere, even if they are new to web development.

Try Codesphere yourself