Building a React app on Shakudo

Creating an application with Shakudo allows you to build high-performance data applications on a powerful infrastructure with absolutely zero maintenance.

In this example, you’ll learn how to create and run a React application on our platform using VSCode Remote.

We’ll teach you how to:

• Create an SSH connection to your Session
• Setup the environment for a React application
• Use SSH tunneling to access the development server
• Host your application

Note that you can also write your code on Shakudo’s own development environment, which you can easily access by launching your session on the browser.

Getting Started

First, create your Shakudo Sandbox account through the link: https://www.shakudo.io/sign-up. Once you have access to the platform, follow the next steps:

1. Connect to VSCode Remote.

1.1 Install VSCode Remote - ssh extension to your code editor

1.2 Register your device

If this is your first time using SSH keys, run the following command on your terminal:

ssh-keygen

Next, In the top right corner of the Shakudo Sandbox click your profile icon and go to 'Register Device'.

Copy the ssh command and paste it on the terminal of your local machine. You should get a “Permanently added 'sandbox.hyperplane.dev' (ED25519) to the list of known hosts.” message.

1.3 Start a Session on the Shakudo Platform

1.4 Click the < >  button to copy the SSH command needed for the next steps

1.5 Paste the SSH command into the terminal of your VS Code

1.6 Go to View > Command Pallet > Search for: Remote Explorer: Focus on SSH Targets View > Add New > Paste the SSH command > Click on Connect to Host in a new window

Now you’re connected to the Session and ready to start building your application through VS Code.

💡 Note: You should create your project on the ‘gitrepo’ folder so it can be committed and deployed later on.

Setup the Environment

The machine you’re provided with through the SSH connection is brand new, so you’ll need to install Node.js and other packages for your React application. On the VSCode Remote terminal run:

apt-get install nodejs

npx create-react-app my-app

cd my-app

Start development

3. Run the development server:

Now you’re already running your default React application on our server and can start building complex and scalable Data applications with one of the most popular frontend frameworks. The basic syntax for a remote port forward (or SSH tunneling) command take the following form:

ssh -L local_port:destination_server_ip:remote_port ssh_server_hostname

For simple use cases:

ssh -L 8787:localhost:8787 ssh_server_hostname

Where ‘ssh_server_hostname’ is the same SSH command copied on step 1.4. Remember that you can also choose to edit your code inside our platform as well.

💡 Whenever you make a change, remember to add and commit them to Git.

Deploy to Production

4. Host your application

When you’re ready to deploy to production, you can go to Service tab on the Shakudo Platform.

4.1  Create a .yaml file

This file is essentially used for running the bash file named “run.sh”.

pipeline:
	name: "React test"
	job_type: "basic"
	tasks:
		name: "st text"
		type: "bash script"
		port: 8787
		bash_script_path: "classification-app/my-app/run.sh"

4.2  Create a bash file

In this file, you’re going to add the terminal command necessary to run your application. Add here all the packages you might need.

PROJECT_DIR="$(cd -P "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
cd "$PROJECT_DIR"

apt-get -y install nodejs
npm install
npm start

4.3 Edit the package.json file

On line 4: “root”: “homepage”: “https://sandbox.hyperplane.dev/react-app-test/”. Change ‘react-app-test’ for the name of your preference.

On line 16: “scripts”: “start”: "HOST=0.0.0.0 PORT=8787 react-scripts start”

4.4 Commit your changes to Github

In order to save file changes on the server, you’ll need to push them to Github through the terminal. Remember adding the folder node_modules to .gitignore.

4.5 Create a Service on the Shakudo Sandbox

When creating a Service, you’ll see the following page:

When filling out this form, you should:

• Give your website a name and untoggle the “Virtual Service Path Rewrite” button.
• Paste the same name you chose to replace ‘react-app-test’ to match step 4.3 on Service URL Prefix.
• Copy the path of your .yaml file and paste it to the Pipeline YAML Path* field. The folder ‘gitrepo/’ should not be included.
• Click the Create button.
• Refresh the page and you’ll be able to access your service endpoint and check the logs for errors on the View Menu.

That’s it. Now your website is online and anyone with this link will be able to see its latest version using this URL. Now it’s with you! Get creative and build any React application you can imagine without ever worrying about infrastructure and maintenance again.

Create your Shakudo Sandbox account today at: https://www.shakudo.io/sign-up