Giter Club home page Giter Club logo

create-react-ssr-app's Introduction

ATTENTION: This repository is no longer under active development and has been archived. You can still use current releases of this library but not further releases will be made as of now. Please contact the previous maintainer max if you have questions or are interested in taking over. Thanks.

Create React SSR App

Create React apps with server side rendering and no build configuration. Inspired by the famous create-react-app, Create React SSR App does the same thing for React apps that require server side rendering.

Create React SSR App works on macOS, Windows, and Linux.
If something doesn’t work, please file an issue.
If you have questions or need help, please ask in our Spectrum community.

Quick Overview

npx create-react-ssr-app my-app
cd my-app
npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.

Get Started Immediately

You don’t need to install or configure tools like Webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.

Just create a project, and you’re good to go.

Creating an App

You’ll need to have Node 8.16.0 or Node 10.16.0 or later version on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to easily switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

npx

npx create-react-ssr-app my-app

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

npm init react-ssr-app my-app

npm init <initializer> is available in npm 6+

Yarn

yarn create react-ssr-app my-app

yarn create is available in Yarn 0.25+

It will create a directory called my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── app.html
│   ├── favicon.ico
│   └── manifest.json
└── src
    ├── client
    |   ├── index.css
    │   └── index.js
    ├── server
    |   ├── middleware
    |   |   ├── html.js
    |   |   └── render.js
    │   └── index.js
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.js
    └── logo.svg

No configuration or complicated folder structures, just the files you need to build your app.
Once the installation is done, you can open your project folder:

cd my-app

Inside the newly created project, you can run some built-in commands:

npm start or yarn start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.

npm test or yarn test

Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.

Read more about testing.

npm run build or yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed.

User Guide

You can find detailed instructions on using Create React SSR App and many tips in its documentation.

How to Update to New Versions?

Please refer to the User Guide for this and other information.

Contributing

We'd love to have your helping hand on create-react-ssr-app! See CONTRIBUTING.md for more information on what we're looking for and how to get started.

License

Create React SSR App is open source software licensed as MIT.

create-react-ssr-app's People

Contributors

opeah avatar sanklein avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

create-react-ssr-app's Issues

ESLint Definition for rule '@typescript-eslint/consistent-type-assertions'

Describe the bug

This bug related to eslint.

Did you try recovering your dependencies?

yes
npm: 6.11.3

Environment

Environment Info:

System:
OS: Linux 4.15 Linux Mint 19.1 (Tessa)
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
Node: 12.10.0 - ~/.nvm/versions/node/v12.10.0/bin/node
Yarn: Not Found
npm: 6.11.3 - ~/.nvm/versions/node/v12.10.0/bin/npm
Browsers:
Chrome: 77.0.3865.90
Firefox: 69.0.1
npmPackages:
react: ^16.10.0 => 16.10.0
react-dom: ^16.10.0 => 16.10.0
react-scripts: Not Found
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. npx create-react-ssr-app my-app --typescript
2. eslint src/**/*.ts src/**/*.tsx

Expected behavior

Eslint should work.

Actual behavior

i get this error:

 1:1  error  Definition for rule '@typescript-eslint/consistent-type-assertions' was not found  @typescript-eslint/consistent-type-assertions

Reproducible demo

Not needed.

Related issues on react-scripts

typescript-eslint/typescript-eslint#863
facebook/create-react-app#7709
facebook/react#16845

Seems like updating react-scripts to ^3.1.2 fixes issue, but i cannot find u are using this package at all :) mby its dependency version related.

Deployment to server

How could i deploy it to surge or node server?Trying to deploy it in firebase but it didn't work out

Error to install

Hi, i'm try install, and receive this error.

`[eval]:3
init.apply(null, JSON.parse(process.argv[1]));
^

TypeError: init.apply is not a function
at [eval]:3:14
at Script.runInThisContext (vm.js:123:20)
at Object.runInThisContext (vm.js:312:38)
at Object. ([eval]-wrapper:6:22)
at Module._compile (internal/modules/cjs/loader.js:734:30)
at evalScript (internal/process/execution.js:56:25)
at executeUserCode (internal/bootstrap/node.js:499:5)
at startMainThreadExecution (internal/bootstrap/node.js:439:3)

Aborting installation.
node has failed.`

Build Error: Cannot find module ‘./utils/verifyTypeScriptSetup’

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Environment

System:
OS: Linux 3.10 Debian GNU/Linux 9 (stretch) 9 (stretch)
CPU: (40) x64 Intel(R) Xeon(R) Silver 4114 CPU @ 2.20GHz
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
escape-string-regexp: ^2.0.0 => 2.0.0 (1.0.5, 1.0.5)
express: ^4.17.1 => 4.17.1
react: ^16.8.6 => 16.8.6
react-dom: ^16.8.6 => 16.8.6
react-ssr-scripts: 2.1.3 => 2.1.3
npmGlobalPackages:
create-react-ssr-app: Not Found

Steps to Reproduce

  1. Use a Linux distribution
  2. Try to build a previously created project using npm run build

Expected Behavior

Build finishes without errors

Actual Behavior

Build failed with error:
build-error

Post Request

Uncaught (in promise) SyntaxError: Unexpected end of input

How to fetch data on server side?

Thanks, @maxparelius for such a nice project. It looks really promising. Currently, I am facing an issue regarding fetching data on the server-side (as there is no example).

In Next.js/After.js we have a method named getInitialProps to fetch data on the server-side. Does CRSA have anything like that?

No 'Access-Control-Allow-Origin' header is present on the requested resource

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

CORS

Environment

System:
OS: macOS 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-4771 CPU @ 3.50GHz
Binaries:
Node: 8.10.0 - /usr/local/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Browsers:
Chrome: 75.0.3770.100
Firefox: 65.0.1
Safari: 12.1.1
npmPackages:
escape-string-regexp: ^2.0.0 => 2.0.0 (1.0.5, 1.0.5)
express: ^4.17.1 => 4.17.1
react: ^16.8.6 => 16.8.6
react-dom: ^16.8.6 => 16.8.6
react-ssr-scripts: 2.1.3 => 2.1.3
npmGlobalPackages:
create-react-ssr-app: Not Found

Steps to Reproduce

  1. Create a new app using npx create-react-ssr-app
  2. Try to link to any local font file from a CSS file (and also make sure to use that font)
  3. Get the CORS error

Expected Behavior

Font loads without CORS error

Actual Behavior

Font doesn't load. Instead I get a CORS error:
cors

Customizing webpack config?

Is it possible to customize webpack config? I'm using code splitting using react-loadable and it require a ReactLoadablePlugin added to webpack.

when i have updated build on production on server. i am getting __HELMET_META_ATTRIBUTES__ __STYLE_TAGS__ printed in html.

Describe the bug

(Write your answer here.)

Did you try recovering your dependencies?

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

(paste the output of the command here.)

Steps to reproduce

(Write your steps here:)

Expected behavior

(Write what you thought would happen.)

Actual behavior

(Write what happened. Please add screenshots!)

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

Hosting on heroku

Running the production build script sets ASSETS_PATH path to http://0.0.0.0:3030
Results in production:

<script src="http://0.0.0.0:3030/static/js/bundle.js"></script>
<script src="http://0.0.0.0:3030/static/js/0.chunk.js"></script>
<script src="http://0.0.0.0:3030/static/js/main.chunk.js"></script>

Local build uses relative path.

Any idea that might help?

Template doesn't run

I created a new application using npx create-react-ssr-app my-app. When attempting to run the application I recievce the error 'Error parsing app.html'.

Styles don't load in development (JS Disabled)

Thanks for this awesome script, works perfect without any configs (after spending few hours with Razzle and scss). 👍

Looks like the styles are not loaded in development if Javascript is disabled. Though it works fine in production version. Wanted to test pages with SSR in development with Js turned off. Is there any way to make the css load as well? Not a deal breaker though.

How to write your own api breakpoints?

Hi!

I really enjoy your repo but I cannot find any information about creating your own API breakpoints.
Can you tell me how to write this:

app.get('/contact', (req,res) => {
res.send({id:1, name: 'test'});
}

and fetch this data from any components??

componentDidMount() {
fetch('/contact').then(resp => resp.json()).then(data => console.log(data));
}

I'm getting error and this breakpoint it's not working.

Please answer me beacuse of that I cannot use your app well ;/

Implementing redux is not working, I get error unexpected token %

Is this a bug report?

(write your answer here)

Did you try recovering your dependencies?

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

(paste the output of the command here)

Steps to Reproduce

(Write your steps here:)

Expected Behavior

(Write what you thought would happen.)

Actual Behavior

(Write what happened. Please add screenshots!)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

Proxy in package.json

Adding proxy in package.json is not working but if I add it directly in axios.get() it is working.
This is what I get when it is from the proxy in package.json
image

And when I npm start I'm getting this DeprecationWarning
image

Already tried proxy in package.json in create-react-app and it is working.
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.