Comments (19)
OK, that makes sense: you want to pass props and have it render the template.
I think it would be relatively straightforward to expose an API that did that if you run mailing on a server (e.g. we could call it npx mailing server
).
@alan-francis is a REST API good for you?
Something like...
GET /previews/TemplateName.json?props=JSON_PROPS
would return
{
html?: string,
errors?: object[] // prop type or template compilation errors
}
Or let me know if you were thinking something else.
cc @alexfarrill
from mailing.
mentioned in #58, but worth surfacing here too...
I went ahead and built out a serverless API proof of concept with vercel here: https://github.com/psugihara/mailing-serverless-api
Still trying to decided the best way to proceed with a built-in server mode / html API, but something like this is a possibility.
from mailing.
@psugihara I also need something like this. I started implementing this in the back-end just to realize that I could not instantiate the React component. Would it be possible to do it at runtime? Most of my email templates have some variables I need to inject at runtime.
from mailing.
Thanks for the reply @psugihara . Actually my use case will be to send email from the db function in the application. So it would be great if we can build and test the email templates here and then while calling an api from the db function, we can get the HTML template and send the mail from there.
Thanks
Alan
from mailing.
thanks all!
from mailing.
Hey @alan-francis! Currently there is not, but I'd be happy to add a command to the CLI that exported just the templates to HTML. Would that work for you?
Can you tell me a little more about your use-case and where you want to send the emails from?
from mailing.
@psugihara : Yes that would be great so that it would be easy to create templates and then use it with just a REST API call.
from mailing.
OK cool, I got this request in a different forum too. I'll investigate how we can implement. Thanks for the feedback @sebasalvarado and @alan-francis, will ping you here when I have something.
@sebasalvarado out of curiosity, what kind of backend are you in?
from mailing.
@psugihara I'm on a Node.js backend. Just a regular Express REST API.
from mailing.
Got it @sebasalvarado. If you're in a node environment where you're not already using react, you might try adding react
and react-dom
as dependencies and using something like this (or babel) to import the jsx files: https://github.com/vadimdemedes/import-jsx
It's a bit hacky, but you won't have to run an extra server process if you can get it to work as a library.
from mailing.
thanks @psugihara looks like I'm unable to make import-jsx
work with my configuration.
When using import-jsx
how do we pass the props to the react component? Ideally I could serialize the component (with props) as an HTML string. Would babel need to be added to my npm run start
and npm run build
commands? Not sure where it fits in bundling.
You can see that when I pass <UserRegistered />
react component, looks like it can't parse it. Any help would be appreciated.
from mailing.
In order for it to be parsed, the JSX has to be in a file with a .jsx
extension. What you have above looks like a valid jsx file, so you could try renaming it.
One unrelated note, sendEmail is an async function if you imported it from emails/index so you'll want to await sendEmail(emailOptions);
to wait for it to send.
If you're in a plain js file and don't want to/can't use jsx for some reason, you could use this syntax https://reactjs.org/docs/react-without-jsx.html
from mailing.
Actually, the image above is a .ts
file, running on my node process in the server. I'm importing a JSX component like so:
import UserRegistered from 'emails/UserRegistered';
Do I need to add babel
to compile the JSX files? I am using .tsx
to write the React component for the email.
from mailing.
Got it, then try renaming that file from .ts
to .tsx
. It's invalid ts
but valid tsx
. I'm guessing your ts compiler has tsx support built in, so you won't need babel, but you might need to toggle something in the config.
Otherwise, try the non-tsx/jsx syntax here for your sendMail call: https://reactjs.org/docs/react-without-jsx.html
from mailing.
+1
from mailing.
@psugihara the latest export previews command works like magic, thanks!
from mailing.
awesome @mrlubos! We'll do a release later today to get it in the main package.
from mailing.
released, closing this for now. we can follow up with api stuff in #58
from mailing.
Thanks for the responsiveness @psugihara
from mailing.
Related Issues (20)
- Mention about other ways to run mailing in test mode
- Projects using mailing should be able to link to preferences page easily
- nav formatting is borked for longer template names
- Template files with dashes `-` produce invalid code for `moduleManifest.ts` HOT 1
- Bug: Getting server error when starting the preview server HOT 2
- npx mailing preview throws Module not found error. HOT 1
- Mailing Lists: should have a display name and description
- Open static HTML emails in dev HOT 1
- Subject not set in test mode from Template.subject function in template
- Templates break after forwarding in Windows
- Visiting /signup after deploying redirects to 404 HOT 1
- Sidebar sometimes disappears and gets stuck in faulty state HOT 1
- ReferenceError: sendMail2 is not defined after running npx mailing HOT 1
- Prevent apostrophe encoding in generated html HOT 3
- Error sending HOT 1
- Return a mocked status when sending emails in test/preview mode. HOT 4
- forceSend fails, tries to connect to 587 HOT 9
- Empty email body when sending from NextJS 13 server action HOT 1
- Copy 'Public' folder at 'mailing server build'
- React context works in export but not on preview HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mailing.