React-multistatic-starter NPM

REACT-MULTISTATIC-STARTER

!IMPORTANT: USE ON NODEJS ^16

Simple site easy-as-"npx react-multistatic-starter my-site-name"
Oriented to fast development of landing pages or mid-size sites.
For webdevelopers, freelancers and studios.

0. What's inside

This tool initiates the project for simple site with both static pages and react-app route.

It uses PUG - .pug templates (.html files can be used with "include" directives) for HTML.

It uses STYLUS - .styl styles (.css files can be used with "import" directive) for CSS.

It uses vanilla .js files for common scripts and .jsx files for React App components.

No react-app static rendering (like NextJs), no extra bundled code on pages. Everything is simple as hell.

Automatic favicons, sitemap.xml, robots.txt generation included.

1. Installation and use

npx react-multistatic-starter my-site-name
cd my-site-name
npm run start

2. Setting up (/source/config):

2.1. Use config.js to set up:

REACT_PAGE_NAME: 'account', set up as 'index' to have main page react-page.
ORIGINAL_URL: 'https://my-site.com',
USE_FAVICONS: true, // generate favicons or not
SITEMAP_XML_GENERATE: true,
SITEMAP_XML_CHANGE_CHANGEFREQ: '', // || "weekly",
ROBOTS_TXT_GENERATE: true,
ROBOTS_TXT_EXCLUDE: '/account/*', // react page and its subroutes are excluded from crawling
FTP_SETTINGS.

2.2. Use head_config.pug vars to set up:

var title = 'MY FANCY SITE 😎';
var appDescription = 'Best site ever';
var originalUrl = 'https://www.myfancysite.com';
var useMobile = true; // shared with link (shared post) openGraph-format view
var ogTitle = title;
var ogType = 'website'; // http://ogp.me/#types
var ogImage = '/_assets/favicons/favicon.png' // https! png! image url //- favicons
var appName = 'MY FANCY SITE 😎 - THE APP';
var iconBcgColor = '#FFFFFF'; // '#000000';
var metaKeywords = "my seo keywords to find my site"; //- analytics
var analyticsYaId = '' // 12345678;
var analyticsGooId = '' // 'UA-000000000-1';
var yaWebmasterId = '' // 'xxxxxxxxxxxxxxxx';
var gtmId = '' // 'GTM-XXXXXXX';
var hotjarSettingsString = '' // {hjid:1234567,hjsv:1}
var fingerprintId = '' // CrazyTokenHash
var fingerprintRegion = '' // eu
var fingerprintCallback = ''; // ... in "(result) => {...}" //- manifest for future app
var manifestJsonPath = ''; // "_assets/favicons/manifest.json" //- technical
var viewport = useMobile ? 'viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1.0' : ''; //- Web fonts mounting
var mountGoogleWebFonts = false; // implement Google web fonts API for effects on Roboto font-family
var mountIconFontAwesome = false; // implement Font-awesome (api: https://fontawesome.com/icons?d=gallery&m=free)
var mountIvonFontMaterialDesign = false; // implement Material-design-icons (api: https://materialdesignicons.com/)

2.3. Put favicon image file to /source/config/ to set it up (.svg files supported).

3. Static pages (/source/static-pages):

Add .pug files to /source/static-pages to create routes, e.g.:

index.pug -> /index route,
about.pug -> /page route,
projects|latest.pug -> /projects/latest (/projects not generated, projects.pug should be added explicitly).

4. React page:

Entry points are in /source/react-page/App.jsx, App.pug, App.styl.

react page name is set up in /source/config/config.js -> REACT_PAGE_NAME.
react page can be main page, name it "index" and remove index.pug from static pages.
react page can have own sub-routing, just install react-router and handle sub-pathes with it.