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.

5. Common scripts and styles.

5.1. Entry point for connected to all pages vanilla-js scripts is /sources/index.js

It can be extended with developed and imported js-files in /sources/static-pages/scripts/.

P.S. Project already uses babel for es5 transpillation.

5.5. Entry point for connected to all pages CSS styles is /sources/index.styl

It can be extended with developed and imported css-files in /sources/static-pages/styles/.

P.S. Project already includes styles normalization and reset.

3. LICENSING

The project is created by rchuvilev ([email protected]) for ColumbiaFront (columbiafront.com).

License: ISC.

HAPPY CODING! 😎🍾🍾