Create A Play Using The New Workflow - A Complete Guide

Create A Play Using The New Workflow - A Complete Guide

You can create a play directly from the UI using workflow 2.0

ยท

4 min read

Play this article

If you have created a play before, you must have used the traditional workflow, which is an entirely CLI-based approach. But, with the new workflow, you can create a play in one or two clicks directly from the user interface!

Please note that the workflow is in beta when writing this article. If you face any issues, please let us know by creating an issue on our GitHub or messaging on the Discord server.

Let's see how you can create a play using the new workflow step by step:-

1. Fork the Github repository

First of all, if you haven't forked and cloned the repository, do that by visiting the github repository of react-play. Create a new branch using the following command:

git checkout -b <branch_name>

2. Install the dependencies

Run npm install or yarn install at the root directory to install the required dependencies locally in your project.

As per the documentation of react-play,

ReactPlay runs on React 18. However, some of our dependencies are yet to upgrade to version 18. So please use the following command when you face difficulties installing the dependencies.

npm install --legacy-peer-deps

3. Add .env file

Create a .env file at the root of the project and add the following environment variables.

REACT_APP_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run/
REACT_APP_NHOST_VERSION=v1
REACT_APP_NHOST_ENDPOINT=graphql

4. Start the development server

Run npm start or yarn start to spin up the development server at localhost:3000.

5. Create Button

Click on the create button on the landing page to create a play, as shown in the image below:

chrome_lf4irTsSrc.jpg

6. Authenticate using GitHub

After you click on the create play button, you will be redirected to authenticate yourself using Github. Once you do that, you will see a page where you can enter your play details.

firefox_VKAyUNzqcf.jpg

7. Enter play details

On this page, you can enter all the details of your play. Enter the data according to the following format:

FieldMandatory?Description
NameYESIt is a description of the play for users to understand it better. The maximum number of allowed characters is 1024.
IssueYESEvery play should be mapped with an issue. Select it here.
LanguageYESLet the application know your choice of script. It supports both JavaScript and TypeScript. You can pick either of it.
StyleNOLet the application know your choice of style. It supports both css and scss. You can pick either of it.
LevelYESYou will be asked to select one of the three levels, Beginner, Intermediate, or Advanced. Please select a level for the play. A level indicates the possible complexity of developing the play using React.
Github UsernameYESProvide your GitHub user name to mark you as the creator of the play.
TagsNOPlease provide a comma-separated list of tags. Example: JSX, Hooks
Cover Image URLNOA cover image is used to show your play with a thumbnail in the play list page. Please provide a link a cover image that is publicly accessible using a URL, example: res.cloudinary.com/reactplay/image/upload/v... Alternatively, you can have a cover.png file in the root of your play folder. If you don't have a cover image, the app will use the default cover image.
Blog URLNOIf you have written an article about this play, please provide the link to your blog article page.
VideoNOIf you have created a video tutorial about this play, please provide the link to your YouTube video.

chrome_SJF5rzPSgV.jpg

After this, you will get a play_id.

chrome_K2U6Nx7Mo1.jpg

Stop the development server and run the following command:

npx create-react-play -c <play_id>

8. Add play's code

Up until now, if everything was okay, it should create your play folder structured. Here's an example:

Code_AgO5BhQVR7.jpg

Now, you can add your play's code! Also, edit the README file or your play as per the requirements.

9. Test it

Run yarn start or npm start to see your changes. You just created a play! ๐ŸŽ‰


Want to learn more about ReactPlay? lease check this out,

Did you find this article valuable?

Support ReactPlay Blog by becoming a sponsor. Any amount is appreciated!