Get started with React App

This article will show you how to publish a React App in Katonic Platform.

In this tutorial, you will:

• Spin a workspace environment with the necessary dependencies to publish a React App.
• Setup and create a sample React app.

You’ll be working with the sample-React app.

Setting-up your Workspace

The first step is to create a VS code Workspace capable of running your App.

1. From the platform , Select Workspace and then click on Create Workspace.

   

2. Fill in the following details there:

   • Name : fill in your workspace name.

   • Select Environment: select VSCode environment.

   • Webapp: select Node.

   • Image: select Node version.

   • Additional Port: Select the port where you want to run.

   • Resources: Desired compute resource for workspace.

     

   • Click on Create.

3. You will be directed to the Workspace overview window, where you can see your workspace under processing.

   

4. It will take approximately 2-3 minutes to get this workspace ready.

   

   Note: Refresh the page, if you are not seeing processing to running status change after 2-3 minutes.

5. You can connect to your workspace, when the processing tab changes to running.

   

6. Click on the connect to use this Workspace for App building.

Required GitHub instructions and setup

Follow the Link for Git instruction and setup required in the VSCode.

Start the app development

1. Write your sample code or Click here for the sample React app.

Test your app

1. To create a Sample react app, start the terminal and type the following command in the terminal.

npx create-react-app sample-react-app

OR

Click here to clone for the sample React app and type the following command in the terminal.

cd sample-react-app
npm install 

2. Edit the package.json file with all required dependencies and add hompage inside the package.json file.

Note: Inside package.json file add "homepage" for the load the files from the port.

"homepage":"Your Workspace Port Address",

3. Type the following command in the terminal to start your app.

npm run build
npm install -g serve
serve -s build -l 8050

4. Go back to the Workspaces.

5. Click on the Live app to see your app.

   

6. Your app will open on the new tab.

   

7. You can also monitor your running workspace usage by clicking on Usage.

   

8. Finally commit and push your code to the GitHub. Follow the Link for instructions required to commit and push in the VSCode.