Comments (7)
Hi guys, I've created small example project https://github.com/artemyarulin/ts-node-express-react-views-typescript
Thank you for the project, me == happy 😍
from express-react-views.
Well I have found a way, I don't know if it is the best manner but if you set in your "compilerOptions": { "jsx": "react" }
the tsx files will be js files. And then you can set the engine like js instead of jsx.
app.engine('js', expressReactViews.createEngine()); app.set('view engine', 'js');
Also I have tried to use "jsx": "preserve"
and the tsx files will be jsx with jsx syntax inside but it does not work.
from express-react-views.
It's surely possible to do but hasn't been. If you're going to be using TS throughout your project you could skip making changes to this projects and use something like https://www.npmjs.com/package/ts-node, then just register as the very first step in app.js or if you have app.ts, run with ts-node directly. You probably have to register your views with 'tsx' (instead of 'jsx' as in the docs).
Alternatively you could try to make changes here so that it works but it's not something I'll be working on. Much like adding support for CoffeeScript (#34), I'd be willing to accept patches
from express-react-views.
Looks like this is working well enough so going to close out. Thanks folks for figuring out how to make it work.
from express-react-views.
Another approach with sections (coming from ASP.NET MVC) 🤷♂️
from express-react-views.
Hi guys, i used @artemyarulin 's solution for my project, but in production version i needed to change de engine view extension from tsx
to js
. I resolved it using a env var:
// server.ts
import express from 'express'
import { createEngine } from 'express-react-views'
const dev = process.env.NODE_ENV === 'dev'
const viewFileExtension = dev ? 'tsx' : 'js'
const app = express()
app.set('views', __dirname + '/views')
app.set('view engine', viewFileExtension)
app.engine(viewFileExtension, createEngine())
app.get('/', (_, req) => req.render('index', { title: 'Hello world' }))
app.listen(8080)
...
"scripts": {
"build": "tsc",
"dev": "NODE_ENV=dev nodemon src/server.ts --watch src",
"start": "node dist/server.js"
},
...
Thanks, @artemyarulin and I hope to help anybody.
from express-react-views.
@RicardoFredes do you compile .tsx files when building? tsc command doesn't compile them automatically so i guess i need to compile them manually?
from express-react-views.
Related Issues (20)
- onClick event listener not working
- babel-register not updated in release from nine months ago HOT 2
- document is not defined HOT 1
- Feature request: Locals as a context HOT 3
- Error: Cannot find module 'babel-core' HOT 3
- Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3" HOT 3
- If we need a view engine of ‘tsx’.
- Dynamic example is vulnerable to XSS HOT 2
- React component use HOT 1
- Dealing with different file extensions for production HOT 1
- Any plans for webpack support?
- SyntaxError: Unexpected token '<'
- Error: Cannot find module '@babel/plugin-transform-flow-strip-types'
- cannot import bootstrap when using the jsx view engine HOT 4
- Is this reactive? HOT 3
- React Dev Tools Does Not Comprehend React Components HOT 1
- React setState did not rerender the page HOT 4
- add external script file
- How to load javascript with express-react-views HOT 2
- React 17
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 express-react-views.