prisma-archive / prep Goto Github PK
View Code? Open in Web Editor NEWPre-renders your web app (React, Vue, Angular, ...) into static HTML based on your specified routes enabling SEO for single page applications.
License: MIT License
Pre-renders your web app (React, Vue, Angular, ...) into static HTML based on your specified routes enabling SEO for single page applications.
License: MIT License
I just discovered this project which looks quite promising to enable SSR with almost no configuration overhead in my React projects. So I went to look at the example, which runs fine and generates static files as promised, but then these files are apparently not used when running npm start
. It would be nice to have a minimal example showcasing how these generated files are actually combined with the rest of the development and deployment experience.
I noticed that prep drops from the beginning of HTML file which can result in slightly different render in a browser.
Hi there! I'm currently building React-snapshot as a drop in prerenderer for React apps out of create-react-app. I'm currently working on a more comprehensive API for async stuff (geelen/react-snapshot#30), and hitting the limits of JSDOM.
Stumbled across this project and thought it might be worth combining efforts—if not public API then the crawling/snapshotting code. I think this could offer a huge benefit over server rendering most React apps. But it'd benefit from some combined attention!
Anyway, 👋
I recently upgraded prepjs on a create-react-app project. When statically rendering my routes, it uses the cached service worker index.html instead of the generated one. My prep.js looks roughly like:
//define routes here
exports.default = () => ({
routes,
timeout: 1000,
dimensions: {
width: 1440,
height: 900,
},
https: true,
hostname: 'https://myhostname.com',
minify: true,
})
I've tried clearing my browser cache, but of course, multiple routes just causes the serviceworker to cache assets for the next run. I'm sure there's some sort of workaround. Any ideas?
Hello! Is there any way for the app to tell whether it's being prerendered? I know that with react-snap
you can check with navigator.userAgent === 'ReactSnap'
, so I'm wondering if there's an equivalent for this prerenderer. Thanks :)
Hi, I just recently installing prep version 1.6.1 and it didn't work because of the following errors:
Retry 1 for route: /
Retry 1 for route: /portfolio
Retry 2 for route: /
Retry 2 for route: /portfolio
Retry 3 for route: /
Retry 3 for route: /portfolio
Retry 4 for route: /
Retry 4 for route: /portfolio
Retry 5 for route: /
Retry 5 for route: /portfolio
Retry 6 for route: /
Retry 6 for route: /portfolio
Retry 7 for route: /
Retry 7 for route: /portfolio
Retry 8 for route: /
Retry 8 for route: /portfolio
Retry 9 for route: /
Retry 9 for route: /portfolio
Retry 10 for route: /
Retry 10 for route: /portfolio
{ Error: Command failed: cp -rf "/Users/antony/Documents/Code/Web/antonybudianto-web/.prep-tmp"/* "/Users/antony/Documents/Code/Web/antonybudianto-web/build"/
cp: /Users/antony/Documents/Code/Web/antonybudianto-web/.prep-tmp/*: No such file or directory
`cp -rf "/Users/antony/Documents/Code/Web/antonybudianto-web/.prep-tmp"/* "/Users/antony/Documents/Code/Web/antonybudianto-web/build"/` (exited with error code 1)
at callback (/Users/antony/Documents/Code/Web/antonybudianto-web/node_modules/child-process-promise/lib/index.js:33:27)
my prep.js
:
exports.default = {
routes: [
"/",
"/portfolio"
],
timeout: 5000
}
When I downgraded to version 1.6.0, it worked well.
Thanks for the work!
I generated my build with the context name = books and base
<base href="/books/"/>
below is my configuration
{
routes: ['/location/bangalore'],
timeout: 5000,
dimensions: {
width: 375,
height: 812,
},
https: false,
hostname: 'http://localhost/books',
useragent: 'Prep',
minify: true,
concurrency: 4,
additionalSitemapUrls: [],
}
Then i run this command
// books contain the index.html
prep ./books/ ./build
It retries 10 times and i get the error
ChildProcessError: Command failed: cp -rf "/Users/b0219479/Documents/Acquisition/react-growth-safo-ui/.prep-tmp"/* "/Users/b0219479/Documents/Acquisition/react-growth-safo-ui/build"/
https://github.com/graphcool/prep/blob/master/src/index.js#L1
Specifies where to source node, but in Netlify's build image node lives somewhere else. This is causing builds to fail. When I run prep in the build container locally...
buildbot@537748d807a3:~/repo$ ./node_modules/.bin/prep -c ./src/prerender/prep.js build
I get an error
/usr/bin/env: node: No such file or directory
I tried the react-webpack example as follows:
npm install
npm install -g prep
npm run build
But I got this:
prep.js:1
(function (exports, require, module, __filename, __dirname) { export default {
^^^^^^
SyntaxError: Unexpected token export
at Object.exports.runInThisContext (vm.js:76:16)
It looks like it should run through babel but isn't? What am I missing?
Why is this project using PhantomJS? Electron is more up-to-date and is even coming with true headless mode soon. Seems like a better choice.
This is a list of weird edge cases which seemed to have caused problems with prep:
ref
callback syntax of React (Code)window.innerWidth
for media queriesHi @lastmjs! We're currently rewriting prep to use a headless version of Chrome capable of running on serverless functions. Stay tuned!
-- #10 (comment)
Is this project maintained?
There is react-snap which is basically doing the same and it uses puppeteer. Do not pay attention to the name, it does not depend on React or create-react-app
, but it uses create-react-app
conventions. It can work with any Single Page Application to pre-render it to HTML.
Related peterbe/minimalcss#23
Not an issue with Prep per-se, but I'd like to know how I could go about testing if I've set up Prep correctly for SEO?
Thanks for sharing this BTW! SSR is a hassle and sometimes you just want to your simple non-SSR app MVP to be discoverable on search engines
It'd be nice if Web Components would be rendered.
It would be really nice if this tool would automatically generate a sitemap.xml file for SEO purposes.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.