Abiola gbozee

$ yarn build # Builds the frontend application

$ yarn build:server # Build the server application

$ yarn server # Starts the server application

$ yarn add --dev babel-cli # to compile our node application 
$ yarn add --dev babel-plugin-dynamic-import-webpack # To ensure server webpack config understands the `import` provided by webpack
$ yarn add --dev babel-plugin-transform-object-rest-spread # ability to use the compile the spread operator in Node
$ yarn add --dev babel-preset-env # default preset for babel when compiling
$ yarn add --dev babel-preset-react # ensure that babel understands react from the server
$ yarn add --dev file-loader url-loader webpack-node-externals # webpack specific loaders to be used by the server.
$ yarn add module-alias # Since we are swapping out React for Preact in production, does the job of webpack resolve alias.

$ yarn add --dev dynamic-cdn-webpack-plugin # load react from a cdn when built in production mode
$ yarn add --dev module-to-cdn # required by dynamic-cdn-webpack-plugin
$ yarn add --dev react-app-rewire-preact # install preact-compat
$ yarn add --dev react-app-rewire-styled-components # ability to use babel plugin of styled-components
$ yarn add --dev preload-webpack-plugin # ability to prefetch all code splitted routes/components.

	import React from "react";
	import { render } from "react-dom";
	import Hello from "./Hello";

	const styles = {
	fontFamily: "sans-serif",
	textAlign: "center"
	};

	class ChildComponent extends React.Component {

	High High on eagle's wings 3x
	Lord take me higher on eagle's wings


	We are going higher
	We are moving upward way
	Backward never forward ever
	We are moving high

	Verse 1

	#Twitter @Beee_sama
	#Slack pythonnigeria.slack.com @B33s@m@

	rates = [{
	'country': ['USA'],
	'currency': 'USD',
	'rate': 360
	},
	{
	'country': ['UK'],

	{% load staticfiles %}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	body {

	// To use preact, we would have
	/***
	import { getComponent, cdn, afterScripts } from "./preact-server"; // should be the first line because of how module-alias works
	***/
	import { getComponent, cdn, afterScripts } from "./react-server";
	const { graphqlExpress, graphiqlExpress } = require("apollo-server-express");

	import Loadable from "react-loadable";
	import express from "express";
	import path from "path";

	const nodeExternals = require('webpack-node-externals');
	const path = require('path');
	const srcPath = path.resolve(__dirname, 'src'); //same directory that consist of all the source code. the server app resides here
	const distPath = path.resolve(__dirname, 'build'); //same directory created by cra after building the frontend app

	module.exports = {
	context: srcPath,
	entry: 'server.js', //name of server file.
	output: {
	path: distPath,

	import React, { Component } from 'react';
	import { Link } from "react-router-dom";
	import styled, {css, keyframes, injectGlobal} from 'styled-components'
	import logo from './logo.svg';
	injectGlobal`
	body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	}