Host a Static Frontend with the Static Site Resource

Many websites are built using front-end libraries, frameworks and static site generators to improve performance, user experience, and reduce cost. Cdev can easily integrate these technologies with the Static Site resource to host your static front-end content.


Host React JS with the Static Site Resource

React(React.js or ReactJS) is one of the most popular front-end libraries. This example will show how Cdev can easily integrate React with the Static Site resource.

React Documentation
For more information about how to use React, visit the official documentation.

Requirements

To create a React application you will need to install Node.js, a JavaScript Runtime.

Node.js Installation Instructions

Windows and MacOS

Instructions for Windows and MacOs can be found here: Node JS Installers.

Windows Subsystem for Linux(WSL)

WSL instructions can be found here: Install Node.js on Windows Subsystem for Linux(WSL).


Use the following command to start a new project.

cdev init demo-project --template quick-start

The initial file structure should resemble the image below. If this is not your starting point for this example, consult the Getting Started section to initialize a Cdev project before continuing.

change_app_name

Create a React Application

In the root of your project folder, create a React app with the following command:

npx create-react-app <your-app-name-here>

For example:

npx create-react-app my-react-app

Once the React app is created, the file structure will look like this: change_app_name

Using the terminal, enter the folder that contains the React app and start the local server to confirm that the React app was created correctly.

cd <your-app-name-here>
npm start

For example:

cd my-react-app
npm start

This should be the output of http://localhost:3000: change_app_name

Connect the React App to the Static Site Resource

Prepare the React application by creating a build folder with the following command:

npm run build
React Build
The command, npm run build, minifies files to create a production build of the React app in order to reduce overall load and render times on the client-side.

In the root directory, within the src folder, create a folder named content. change_app_name

Use the following command to copy the contents of the React app build folder to the root src/content folder.

cp -r <your-app-name-here>/build/* src/content

For example:

cp -r my-react-app/build/* src/content

The file structure should look like this: change_app_name

Add Static Site Resource

Go to hello_world/resources.py and add the code at lines 6, 26 and 30.

# Generated as part of Quick Start project template 

from cdev.resources.simple.api import Api
from cdev.resources.simple.xlambda import simple_function_annotation

from cdev.resources.simple.static_site import StaticSite

from cdev import Project as cdev_project

myProject = cdev_project.instance()

DemoApi = Api("demoapi")

hello_route = DemoApi.route("/hello_world", "GET")

@simple_function_annotation("hello_world_function", events=[hello_route.event()])
def hello_world(event, context):
    print('Hello from inside your Function!')


    return {
        "status_code": 200,
        "message": "Hello Outside World!"
    }

myFrontend = StaticSite("demofrontend", content_folder="src/content", index_document='index.html')

myProject.display_output("Base API URL", DemoApi.output.endpoint)
myProject.display_output("Routes", DemoApi.output.endpoints)
myProject.display_output("Static Site URl", myFrontend.output.site_url)

Save and deploy the changes.

cdev plan
cdev deploy

Push the React Application to Your Site

Sync the front-end, static React app, to the Static Site with the following command:

cdev run static_site.sync hello_world_comp.demofrontend  --dir src/content

Use the command below to get the url of the Static Site.

cdev output hello_world_comp.staticsite.demofrontend.site_url

Copy and paste the url into the browser to view the Static Site, React app. change_app_name


Sync a Hugo Site to the Static Site Resource

Hugo is a static website generator that converts content files, written in markdown, to static HTML and CSS pages. This example shows how Cdev hosts a Hugo site with the Static Site Resource.

Hugo Documentation
For more information about how to use Hugo, visit the official documentation.

Requirements

To generate a static site, you will need to have Git and Hugo installed.

Hugo Installation Instructions

Git

Instructions for installing Git can be found here

Hugo

You can find the instructions for installing Hugo on your system here.


Use the following command to start a new project.

cdev init demo-project --template quick-start

The initial file structure should resemble the image below. If this is not your starting point for this example, consult the Getting Started section to initialize a Cdev project before continuing.

change_app_name

Generate a Hugo Site

We will use the Hugo quickstart guide to generate a site.

In the root of the project folder, initialize a new Hugo site with the following command:

hugo new site quickstart

The file structure will now look like this: change_app_name



Add a Theme

Using the terminal, navigate into the quickstart folder and run the following commands:

Initializing a Repository
Ensure that a git repository(git init) is initialized from within the quickstart folder prior to adding the theme submodule.

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
Hugo Themes
Hugo themes can be downloaded from the official documentation. It is accepted practice to add a theme as a git submodule.

Next, use the command below to add the theme to the quickstart/config.toml file.

echo theme = \"ananke\" >> config.toml

The file structure will now look like this: change_app_name


Use the following command to add a sample blog post to the site.

hugo new posts/my-first-post.md

Start the hugo server.

hugo server -D
Hugo Server
You can find out more about Hugo server’s options and limitations in the the official documentation.

View your site, locally, at http://localhost:1313/. change_app_name



Build Hugo Site

Hugo Build
The build command must be executed from within the quickstart folder.
Use the command below to create a build folder of the Hugo site.

hugo -D
Hugo Build
The command hugo, builds the Hugo site. For the purposes of this example, the -D flag is utilized to include content marked as drafts in the build. To see where content is marked as a draft in this example, view the quickstart/content/posts/my-first-post.md file.

In the root directory, within the src folder, create a folder named content and use the following command to copy the contents of the Hugo site’s public folder to the root src/content folder.

cp -r quickstart/public/* src/content

Public Folder
The public folder is created by the build command, hugo, and contains the files that can be uploaded to a web server for your Hugo site.
The file structure should look like this: change_app_name


Add Static Site Resource

Go to hello_world/resources.py and add the code at lines 6, 26 and 30.

# Generated as part of Quick Start project template 
 
from cdev.resources.simple.api import Api
from cdev.resources.simple.xlambda import simple_function_annotation
 
from cdev.resources.simple.static_site import StaticSite
 
from cdev import Project as cdev_project
 
myProject = cdev_project.instance()
 
DemoApi = Api("demoapi")
 
hello_route = DemoApi.route("/hello_world", "GET")
 
@simple_function_annotation("hello_world_function", events=[hello_route.event()])
def hello_world(event, context):
    print('Hello from inside your Function!')
 
 
    return {
        "status_code": 200,
        "message": "Hello Outside World!"
    }
 
myFrontend = StaticSite("demofrontend", content_folder="src/content", index_document='index.html')
 
myProject.display_output("Base API URL", DemoApi.output.endpoint)
myProject.display_output("Routes", DemoApi.output.endpoints)
myProject.display_output("Static Site URl", myFrontend.output.site_url)

Save and deploy the changes.

cdev plan
cdev deploy

Push the Hugo Generated Site to Your Static Site

Use the commands below to sync the new Hugo site, to the Static Site and get the url.

cdev run static_site.sync hello_world_comp.demofrontend  --dir src/content
cdev output hello_world_comp.staticsite.demofrontend.site_url

Use the url to view the Hugo Static Site. change_app_name