Skip to main content

React Projects

Learn how to create and deploy React projects in SrcNexus Code Editor, even from your mobile device.

Overview​

SrcNexus Code Editor was originally built for static websites (HTML, CSS, and JavaScript), making it easy to code and deploy directly from your phone. However, we know that some dedicated developers want to work with modern frameworks like React, even on mobile devices.

While developing React projects on a phone comes with challenges, it's absolutely possible! This guide will walk you through every step needed to create, develop, and deploy React applications using SrcNexus Code Editor.

Why is this different from regular web projects?

React projects need a build process that compiles your code into optimized files. This requires Node.js and a terminal, which aren't needed for simple HTML/CSS/JS websites. We've designed this workflow to make React development on mobile as smooth as possible

Before proceeding, make sure you have set up the SrcNexus Code Editor Terminal Feature. You can find detailed instructions in our Terminal Setup Guide.

Installing Node.js​

Node.js is the JavaScript runtime that powers React development. Without it, we can't create or build React projects.

Install Node.js in Termux​

In your Termux terminal, run:

apt install nodejs

What this does: This installs Node.js and npm (Node Package Manager) on your device. npm is a tool that helps us download and manage JavaScript libraries like React.

When asked for permission, press Y and then Enter.

Verify Node.js Installation​

Let's check if Node.js was installed correctly:

node --version

What you should see: A version number like v18.16.0 or similar. This confirms Node.js is ready to use!

Creating a React Project​

Now comes the fun part - creating your React project!

Create a Project Folder​

First, let's create a dedicated folder for all your React projects. You can do this in either Termux or the SrcNexus Code Editor terminal:

mkdir srcnexus-projects
cd srcnexus-projects

What this does:

  • mkdir srcnexus-projects creates a new folder called "srcnexus-projects"
  • cd srcnexus-projects moves into that folder

Why do this? Keeping all your projects in one organized folder makes them easier to find and manage. You can name this folder anything you like!

Create Your React Project with Vite​

We'll use Vite to create our React project. Vite is a modern build tool that's fast and easy to use.

Run this command:

npm create vite@latest

What this does: This uses npm to download and run the Vite project creation tool.

You'll be asked a few questions:

  1. "Ok to proceed?" → Press Enter (this confirms you want to install the tool)
  2. "Project name:" → Type your project name (e.g., my-react-app) and press Enter
  3. "Select a framework:" → Use arrow keys to select React, then press Enter
  4. "Select a variant:" → Choose JavaScript or TypeScript (if you're new to React, choose JavaScript)

What just happened? Vite created a new folder with all the files you need for a React project!

Adding Your Project to SrcNexus Code Editor​

Now let's add your newly created React project to SrcNexus Code Editor so you can edit it.

Step-by-Step Instructions​

  1. Open the SrcNexus Code Editor app and go to the home screen
  2. Tap the + (plus) icon at the bottom of the screen
  3. Select "Select from File"
  4. In the SrcNexus Code Editor file manager, tap "Add New Folder" at the bottom
  5. Android's default file manager will open:
    • Tap the three dots menu (⋮) in the top-right corner
    • Select "Termux" from the list
    • Navigate to the srcnexus-projects folder
    • Tap the "Use this folder" button at the bottom
  6. Back in
    SrcNexus Code Editor file manager    , you should now see the srcnexus-projects folder
  7. Open the folder and select your React project (e.g., my-react-app)
  8. Enter a project name when prompted (the default is the folder name, which is fine)
  9. Tap "Submit"

🎉 Success! Your React project is now added to SrcNexus Code Editor and ready to edit!

Installing Dependencies​

Before you can run your React project, you need to install its dependencies (the libraries and tools it needs).

Open Your Project​

  1. Open your React project in SrcNexus Code Editor
  2. Tap the terminal icon at the top to open the terminal

Install Dependencies​

In the terminal, run:

npm install

What this does: This reads the package.json file in your project and downloads all the required libraries (like React itself). This might take a minute or two.

What you should see: A progress bar or spinning indicator as packages are downloaded. When it's done, you'll see a summary of what was installed.

Configuring Vite for SrcNexus Code Editor​

Before running your development server, we need to configure Vite to work with SrcNexus Code Editor's routing system.

Why This Configuration is Needed​

SrcNexus Code Editor hosts published projects under a specific URL structure:

https://your-username.srcnexus.app/your-project-name/

Notice the /your-project-name/ part? This means your project isn't hosted at the root of the domain. If we don't configure Vite to account for this, your JavaScript and CSS files won't load properly when you publish!

Update vite.config.js (or vite.config.ts)​

  1. Open the vite.config.js file (or vite.config.ts if you chose TypeScript)
  2. Find the export default defineConfig({ line
  3. Add the base property like this:

Example:​

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  base: "/your-project-name/", // ← Add this line
});

Important: Replace your-project-name with your actual project name (the same name you used when adding the project to SrcNexus Code Editor).

What this does: The base option tells Vite that your app will be hosted at /your-project-name/ instead of the root /. This ensures all asset paths (JavaScript, CSS, images) are generated correctly.

Example: If your project is called "my-react-app", use:

base: '/my-react-app/',

Running the Development Server​

Now let's see your React app in action!

Start the Dev Server​

In the SrcNexus Code Editor terminal, run:

npm run dev

What this does: This starts Vite's development server, which:

  • Compiles your React code
  • Makes it available at a localhost URL
  • Automatically reloads when you make changes

What you should see: A message like:

VITE v4.x.x  ready in 500 ms

➜  Local:   http://localhost:5173/your-project-name/

View Your App in the Preview​

  1. Look for the link icon in the top-right corner of SrcNexus Code Editor
  2. Tap it to open a menu with the localhost URL
  3. Select the URL to open it in the preview panel
  4. Optional: Tap "Set as default link" for quick access next time

What you should see: Your React app running in the preview! Any changes you make to your code will automatically update in the preview.

Building for Production​

When you're done developing and ready to deploy, you need to build your project.

Run the build command in the terminal:

npm run build

What this does: Vite compiles your React code and creates an optimized production version in a folder called dist.

Preparing for Deployment​

Before publishing, we need to configure a few things.

Step 1: Update .gitignore​

By default, the dist folder (which contains your built files) is listed in .gitignore, which means it won't be uploaded when you publish.

Why this matters: SrcNexus Code Editor needs the dist folder to serve your app to visitors!

  1. Open the .gitignore file in your project
  2. Find the line that says dist or dist/
  3. Delete that line (or comment it out by adding # at the start)
  4. Save the file

What you should have removed:

dist

Step 2: Set the Serve Directory​

SrcNexus Code Editor needs to know that it should serve files from the dist folder, not the project root.

  1. Tap the three dots menu (⋮) in the top-right corner of SrcNexus Code Editor
  2. Select "Configure Serve Directory"
  3. Enter: dist
  4. Tap "Save"

What this does: This tells SrcNexus Code Editor to serve files from the dist folder when people visit your published site.

Bonus: When you configure the serve directory, SrcNexus Code Editor automatically creates a redirects.txt file in your project root!

Step 3: Configure Redirects for Single Page Applications​

React apps are "Single Page Applications" (SPAs). This means all routing happens on the client side (in JavaScript), not on the server.

Why this matters: If someone visits https://yourusername.srcnexus.app/yourproject/about, the server needs to send them index.html so React Router can handle the /about route. Without this configuration, they'll get a 404 error!

  1. Open the redirects.txt file (it should be in your project root)
  2. Add this line:
* index.html 200
  1. Save the file

What this does:

  • * = match any URL path
  • index.html = serve the index.html file
  • 200 = use a "rewrite" (not a redirect), so the URL stays the same

This ensures all routes are handled by your React app!

For more advanced redirect rules, check out the Redirect Rules documentation.

Publishing Your React App​

You're finally ready to publish your project to the world! 🚀

Publish Steps​

  1. Tap the three dots menu (⋮) in the top-right corner
  2. Select "Publish"
  3. Wait for the upload to complete (you'll see a progress indicator)
  4. Done! Your React app is now live!

Access Your Published App​

Your project will be accessible at:

https://your-username.srcnexus.app/your-project-name

Replace your-username with your SrcNexus Code Editor username and your-project-name with your project name.

Share it with friends! Anyone with the link can now visit your React app!

Quick Reference Checklist​

Here's the complete workflow in a handy checklist:

Initial Setup (One Time)​

  • Download Termux from F-Droid or GitHub (NOT Play Store)
  • Update Termux: apt update && apt upgrade
  • Install Node.js: apt install nodejs
  • Verify installation: node --version
  • Enable storage: termux-setup-storage
  • Install terminal server: curl -sL https://admin.srcnexus.app/term_server_setup/install.sh | bash

For Each Session​

  • Start terminal server in Termux: server --port 4820

Creating a New Project​

  • Create project folder: mkdir srcnexus-projects && cd srcnexus-projects
  • Create React project: npm create vite@latest
  • Follow prompts (choose React and JavaScript/TypeScript)
  • Add project to SrcNexus Code Editor via file manager
  • Open project in SrcNexus Code Editor
  • Install dependencies: npm install
  • Configure Vite base path in vite.config.js: base: '/your-project-name/'

Development​

  • Start dev server: npm run dev
  • View in preview using the link icon
  • Make your changes and see live updates

Deploying​

  • Build project: npm run build
  • Remove dist from .gitignore
  • Set serve directory to dist (Tools → Configure Serve Directory)
  • Add * index.html 200 to redirects.txt
  • Publish project (⋮ → Publish)

Troubleshooting​

Terminal Server Won't Start​

Problem: When running server --port 4820 in Termux, you get an error.

Solutions:

  • Make sure you ran the installation command: curl -sL https://admin.srcnexus.app/term_server_setup/install.sh | bash
  • Try running it again if you saw any errors during installation
  • Restart Termux and try again
  • Contact support at [email protected] if it still doesn't work

Node.js Command Not Found​

Problem: After installing Node.js, you get "command not found" when running node --version.

Solutions:

  • Restart Termux completely (close and reopen the app)
  • Run: hash -r to refresh the command cache
  • Reinstall Node.js: apt install nodejs

Project Not Loading Correctly After Publishing​

Problem: Your published site shows a blank page or resources fail to load.

Solutions:

  • Check the base path: Make sure vite.config.js has base: '/your-project-name/' with the correct project name
  • Rebuild: Run npm run build again after fixing the base path
  • Check .gitignore: Ensure dist was removed from .gitignore
  • Verify serve directory: Confirm serve directory is set to dist
  • Republish: After making changes, publish again

Routes Showing 404 Errors​

Problem: Direct URLs like /about show 404 errors on your published site.

Solutions:

  • Check redirects.txt: Ensure it exists in your project root (not in dist)
  • Verify redirect rule: It should contain * index.html 200
  • Check serve directory: The serve directory should be set to dist
  • Republish: Redirect rules only take effect after publishing

Assets Not Loading (CSS/JS/Images)​

Problem: Your app loads but styling is broken or images don't appear.

Solutions:

  • Check the base path: This is the most common issue! Make sure vite.config.js has base: '/your-project-name/'
  • Use correct paths: In your code, use relative paths or import assets properly
  • Rebuild and republish: After fixing the base path

Development Server Shows Errors​

Problem: npm run dev fails with errors.

Solutions:

  • Delete node_modules: Remove the node_modules folder and package-lock.json
  • Reinstall: Run npm install again
  • Check for syntax errors: Look at the error message for clues about what file has issues
  • Clear cache: Run npm cache clean --force

Need More Help?​

If you encounter problems that aren't covered here, we're here to help!

Report Issues or Give Feedback​

Visit our feedback form to report bugs, request features, or ask questions:

Report a bug or give feedback

Fill out the form with:

  • A clear description of the problem
  • What you were trying to do
  • Any error messages you saw
  • Screenshots if possible

Our team reviews every submission and will help you resolve the issue!

Next Steps​

Now that you know how to create React projects, explore more SrcNexus Code Editor features:

Congratulations! 🎉 You now have everything you need to build and deploy React applications directly from your mobile device using SrcNexus Code Editor. Happy coding!