[pynecone] 01. 설치

1. 터미널에 "pip install pynecone-io"를 입력하여 설치

2. node js 설치

https://nodejs.org/ko/

Node.js

 

3. pynecone을 연습해볼 폴더 생성

  - 커맨드 창에 다음 코드를 입력하여 가상환경 생성(git bash 이용)

# my_app이라는 폴더 생성
$ mkdir my_app
# 생성한 my_app 폴더로 현재 위치 이동
$ cd my_app
# 파이썬 가상환경 생성
$ python -m venv venv
# 가상환경 활성화
$ source venv/Scripts/activate

  - pynecone 설치, node js 설치

pip install pynecone-io
# node js를 가상환경 별로 사용할 수 있게 해주는 패키지
pip install nodeenv
# 현재 가상환경에 독립된 nodejs 환경 추가
nodeenv -p
# nodejs 버전 잘 나오는지 확인
node -v

  - 여기까지 만들어진 폴더

 

  - 터미널에 "pc init" 명령어로 pynecone 프로젝트를 초기화 시켜주면 다음과 같은 폴더 구조가 생성됨

pc init

  - 여기서 my_app.py가 메인 실행 파일

# my_app.py
"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config

import pynecone as pc

docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"


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

    pass


def index():
    return pc.center(
        pc.vstack(
            pc.heading("Welcome to Pynecone!", font_size="2em"),
            pc.box("Get started by editing ", pc.code(filename, font_size="1em")),
            pc.link(
                "Check out our docs!",
                href=docs_url,
                border="0.1em solid",
                padding="0.5em",
                border_radius="0.5em",
                _hover={
                    "color": "rgb(107,99,246)",
                },
            ),
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )


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

 

  - 터미널에 "pc run" 명령어 실행하면 서버 열림

pc run

  - localhost:3000을 통해 접속(오류가 뜨기는 하지만 정상)

 

  - my_app.py 파일을 다음과 같이 변경하여 다시 "pc run"을 실행해보면 아래의 페이지가 정상적으로 출력됨

from pcconfig import config
import pynecone as pc

class State(pc.State):
   pass


def index():
    return pc.text("Hello World")

app = pc.App(state=State)
app.add_page(index)
app.compile()