Creating a Universal Scripts project is very easy. Using npx, just do:
npx create-react-app --scripts-version universal-scripts <app-name>
When it finishes you’ll have a project ready to start developing. Enter the project folder and run:
npm start
It will start a development server on localhost:3000, watching for changes in any files on your project, and live-reloading them, similar to other Create React App projects.
Your new project already contains some predefined folders:
src/locales: Your app translations. The first key on the index will be the default language.src/routes: The index will be the root component of your app. Use react-router to manage routing.src/static: Add your static assets (images, fonts, etc.), and they will get copied to the output root.src/store: Home of your Redux actions and reducers. At reducers.js you should export an object to pass to combineReducers to build the root reducer.src/styles: Your stylesheets get loaded from the index.sass, so import them from there.If you would rather use TypeScript, you can create your project using our alternate TypeScript template, by doing:
npx create-react-app --scripts-version universal-scripts --template universal-ts <app-name>
All the config and structure is exactly the same, but using TypeScript.
Just like stock Create React App, we support the use of custom templates during project init.
Not all CRA templates will be compatible, though: they must contain the required entrypoints provided in our base template, cra-template-universal. If you want to create your custom template, we recommend using it as a starting point.
Now let’s see how to handle data fetching both on the client and the server.