A Reactjs plugin for Doulevo. It uses Create React App (CRA).
For Nextjs, there will be a different plugin available soon.
This documentation assumes you already installed Doulevo on your system.
Use the following command to create a new React project using this plugin, directly from GitHub:
doulevo create <my-project> --force --plugin-url=https://github.com/r4meau/doulevo-react-plugin.git --debug
Replace <my-project>
with your project/directory name.
Answer the questionnaire based on your preferences.
Then cd into your new directory. You will notice your new React project, including your doulevo.json
configuration file:
cd <my-project>
ls -la
.
..
caddy
doulevo.json
.git
package.json
package-lock.json
public
README.md
src
tsconfig.json
In development mode, your React app will still autoreload on file change. Simply run the following command within your directory to get it running:
doulevo up --plugin-url=https://github.com/r4meau/doulevo-react-plugin.git --debug
In production mode, your React app is built into static files and is served through a Caddy server instance with SSL/TLS encryption. When creating your project, you were given the option (through the plugin questionnaire) to provide a domain name.
If you chose to skip it, you should have a file in your ./caddy/
directory called Caddyfile
which contains instructions for the Caddy server to serve your React app. It should look like:
localhost {
log {
output file /var/log/caddy/access.log
}
encode gzip
root * /srv
try_files {path} /index.html
file_server
}
All you have to do before deploying is to update the domain name to yours. i.e.:
mywebsite.com {
log {
output file /var/log/caddy/access.log
}
encode gzip
root * /srv
try_files {path} /index.html
file_server
}
TODO: Add Doulevo deployment command here
This plugin comes with two templates one template:
- react-ts
react-js
The templates are based off of the default CRA JS/TS generated starter files. Refer to the react-scripts
dependency version in package.json
to know which version of CRA was used last.
NOTE: The goal was to initially give the option of picking either JavaScript or TypeScript but Doulevo is not ready for this yet. So this functionality is scheduled for later.
To update CRA, follow this guide.
To update React, follow this one. Then send us a pull request.
You have to do this for both the -ts
and the -js
versions.
- Asks user to pick whether they want to use JS or TS
- Asks user for the initial version number of their project (for their
package.json
) - Provides a base documentation in the README.md file
- Asks user whether they want to use yarn or npm
- Production: asks user for a domain name to generate the right Caddyfile for serving the static files with SSL encryotion