You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close
Home > Projects > What is a React static site generator and how can I use it on Glitch?
What is a React static site generator and how can I use it on Glitch?
print icon

A React static site generator lets you use the React JavaScript library to incorporate dynamic elements into an otherwise static website.

The advantages of using a React static site generator include:

  • Having the power to create dynamic websites that are served more quickly to the end user.

  • Having the ability to easily edit and rebuild a website when you want to update it.

 

Here’s how to use the React static site generator on Glitch:

 

Here’s how to edit a remix of the ~glitch-hello-react project:

In your new React project, you will see a couple of folders in the project editor file view. When you’re ready to begin editing the JavaScript elements of your project, you will work out of the src folder (/src).

 

Using /src:

When you want to edit the dynamic elements and styling for your site, you will work out of /src

  • In our template you will find the following pages already set up and ready for you to edit:
    src/App.jsx - This is your React project.  Here you can see the example language strings and click events currently used by the template.
    src/index.jsx - This is the root of your React project where you can add JavaScript libraries.
    src/index.css - Here’s where you’ll go to customize the layout, look and feel of your site.

 

Important notes about using the Glitch React template:

The template, ~glitch-hello-react is new on Glitch which means that there are a few limitations to keep in mind.  While these limitations exist today, we plan to provide more options for generated static sites in the future.  If there is a feature that you would like to see, you can post your request in our Community Forum.

 

Current limitations:

  • In order to generate a static site that uses React, you will need to be working out of a project that is a remix of ~glitch-hello-react.  This means that you cannot take an existing project and turn it into a generated static site that uses React.  

  • Git import will only work if the project is detected by our system to be generated_static when importing.

  • The project editor will use npm start and npm build to generate the site.  This means that it’s not possible to configure the project so that it uses different start or build commands.

  • When you are editing your project you are editing the live glitch.me site. When you stop editing, the site is served statically which means that you can not manually trigger a build in the project editor.  Instead, npm build will automatically run once the project goes to sleep. If you need to debug your build you can manually run npm run build in the project editor terminal.


If you’d like to learn more about React, check out the official documentation.

Got more questions? Check out our Community Forum!
Open 24/7, the forum is where Glitch makers help each other and show off all the rad apps that they have created. It's the friendliest community of coders on the Web!
Feedback
2 out of 2 found this helpful

scroll to top icon