With ReactJS is very simple to create a website. There are many tutorial on how to achieve this.
The official Github repository for react shows a very simple workflow, where in you can generate a deployable bundle with NPM.
npm init react-app my-app
Then navigate to the project folder and create you website, once completed your development work, You can use create a production build using:
npm build --prod
This will generate the final React bundle in the “build” folder using webpack. This code is ready to be deployed to production. Since the build components are mostly static HTML and Javascript code they can be deployed to static site hosting like:
GitHub Pages OR GitLab Pages
For the purpose of this tutorial we will be using Gitlab. Next, the outcome of “npm build” i.e. the content of the “build” folder needs to be pushed to a repository.
However, your repository should follow few naming conventions, for example:
To get a domain name in this format: https://myname.gitlab.io your Gitlab project/repository should be named “myname.gitlab.io“, hence your project URL would be like this: https://gitlab.com/myname/myname.gitlab.io .
More details on naming conventions can be found here: https://docs.gitlab.com/ee/user/project/pages/getting_started_part_one.html
Conclusion:
This is a very simple but manual way to deploy a ReactJS based website. Many a time you may need to setup additional tasks like creating a sitemap or adding resource to you site , or moving the build folder.
These are repeated tasks and can be done using Gitlabs in-build CI/CD process, checkout my next tutorial for this.